フェード２７■CSS+JavaScript合体フェード　　　　最新修正 : 2014/07/08　20:15

前回のフェードインフェードアウトのふわっと切り替わるスライドショーのCSSでフェード・スライドを改造しました。
元のCSSだけの分の参考サイトはこちらです。
比較しやすいように、前回と同じ画像を使用しました。

改造その１．
簡単スライドショーのJavaScriptと合体しました。
CSSでは、画像5枚ではなく１枚だけがフェードイン、アウトを繰り返す設定に変更。その画像のスライドショーはJavaScriptで入れ替えしています。

改造その２．
そのせいか前回のフェードの指定(opacity設定部分)では、フェードが綺麗にかからないので、数値をいじってます。この方がイラスト部分のフェードは綺麗です。写真の方も、なんとかフェードっぽくは見えるのではないかと思います。

改造その３．
前回はhtmlに記述した『prefixfree.js』の展開分を、今回は『外部js』にして呼び出しています。htmlよりも上の階層に置いたのでファイルパスに『../』が付いています。htmlと同じ場所なら、この部分は不要です。
詳細はHOMEページのCSSの記述(接頭語)についてをご覧下さい。
『外部js』が面倒な方は、前回分のソースを見て、展開分をコピーして下さい。

改造その４．
今回は前回と比較するためにJavaScriptのスライドショーを２個設置したので、JavaScriptが少し長くなりました。１個だけなら、簡単スライドショーをコピーして、＜div class="slides"＞〜＜/div＞に記述した画像ファイルに『id="Ga"』を記述。そしてbodyタグの中にonload="Show();"を記述すればOKです。

結論というか….
綺麗なフェードが簡単に作成できるので、CSSはとても便利です。画像５枚くらいなら、CSSだけで作成した方がいいかもしれません。
でもそれ以上の枚数なら、フェードだけCSSで作成してJavaScriptと併用した方が楽な気もします。個人の好みでどうぞ。