スライドショーの解説
<!--▼▼▼▼▼ここから「スライドショー」--> <div id="svg-box"> <div class="slide-type1"> <div class="slide img1"> <a href="#"><img src="images/1.jpg" alt=""></a> </div> <div class="slide img2"> <a href="#"><img src="images/2.jpg" alt=""></a> </div> <div class="slide img3"> <a href="#"><img src="images/3.jpg" alt=""></a> </div> <!--インジケーターボタン(現在表示中ボタン)--> <div class="slide-indicators"></div> </div> <!--/.slide-type1--> <!--回転する円形のテキストアニメーション--> <img src="images/bg_text1.svg" alt="" class="animation-text spin"> <svg width="0" height="0" viewBox="0 0 1600 900"> <defs> <clipPath id="myClip1" clipPathUnits="objectBoundingBox"> <path transform="scale(0.000625,0.001111)" d="M274.6,20v58c0,11-9,20-20,20H19.6c-11,0-20,9-20,20v762c0,11,9,20,20,20h1560c11,0,20-9,20-20V20c0-11-9-20-20-20H294.6c-11,0-20,9-20,20Z"> </clippath> </defs> </svg> </div> <!--▲▲▲▲▲ここまで「スライドショー」-->
主なスタイルは
cssフォルダのslide.cssおよび、jsフォルダのmain.jsにスライドショーのスタイル設定があります。
slide.cssでは画像の指定や画像が切り替わるフェードのスピードなどの調整ができます。詳しい説明もありますので調整したい場合はお読み下さい。
main.jsでは、スライドショーの1枚あたりの表示時間の変更ができます。
画像ごとにリンクを貼れます
3箇所ある
<a href="#">〜〜</a>
の部分です。
リンクが不要であればこのhtmlコードは削除しておいて下さい。
16:9のアスペクト比率の画像をレスポンシブ化しています
サンプルテンプレートでは、16:9の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、表示されない部分が出てきますので、16:9以外の比率の画像を全部表示させたければ以下を調整して下さい。
cssフォルダのslide.cssの、
.slide-type1 {
の中にある、
padding-top: 56.25%;
を調整します。56.25というのは、9÷16=0.5625の事です。
もし、2:1の画像を使いたければ、1÷2=0.5
padding-top: 50%;
と書き直せばOKです。
ちなみに、小数点はあってもなくてもほとんど影響ないので切り捨ててもらっても構いません。
画像を入れ替えたい場合
1.jpg〜3.jpgで作る場合はそのままimagesフォルダに画像を上書きすればOKです。拡張子を変えたい場合は、cssフォルダのslide.cssの中で読み込んでいる画像ファイル名を編集して下さい。
画像は容量が軽くなるようにできるだけ圧縮して下さい。
画像を追加したい場合
4枚目の画像(例:4.jpg)を作ってimagesフォルダに入れます。
次に、html側の、
<div class="slide img3"> <a href="#"><img src="images/3.jpg" alt=""></a> </div>
をコピペし、
<div class="slide img4"> <a href="#"><img src="images/4.jpg" alt=""></a> </div>
に変更すればOKです。「4.jpg」は実際にimagesフォルダに入れる画像ファイル名にして下さい。
SVG画像でクリッピングしています
SVG画像をご自身で準備したい場合は、こちらのマニュアルをご覧下さい。
ご自身でSVG画像を準備する際にアスペクト比が変わる場合は、.slide-type1のpadding-topの数値を変更して下さい。
画面幅500px以下になるとロゴが小さくて見えなくなるので、SVG枠は非表示にし、代わりに角丸(border-radius)に変更しています。
枠をSVG画像ではなくpngにしたい場合
アスペクト比16:9(例えば、幅1600px、高さ900px)のpng画像を用意します。中身はスライドショーを表示させるので透過しておきます。
html側のsvgのブロック数行を丸ごと削除し、代わりにこの画像を起きます。
もしimagesフォルダにwaku.pngを用意したのなら、
<img src="images/waku.png" alt="" class="waku">
と書きます。
続いて、slide.cssにこの画像のスタイルを追加します。
#svg-box .waku { position: absolute; left: 0px; top: 0px; width: 100%; } /*画面幅500px以下の追加指定*/ @media screen and (max-width:500px) { #svg-box .waku { display: none; } }/*追加設定ここまで*/
以上です。
回転する円形のテキストアニメーション
<img src="images/bg_text1.svg" alt="" class="animation-text spin">
スライドショーの右下で回転するアニメーション画像です。
「It adds a touch of vibrant color to your life.」
と書かれており「あなたの生活に彩りを」のような意味合いです。
Illustrator画像も入れているので必要があれば書き換えたあとにアウトライン化し、SVGで保存して下さい。
ここではbg_text1.svgというSVG画像を使っていますが、pngなど他の拡張子でもOKです。その際はここのhtmlコードを書き換えて下さい。
「spin」というclassが回転するスタイルです。これをなくせば回転しない画像になります。