フェード２６■CSSでフェード・スライド　　　　UP日時 : 2014/07/07

CSSだけで作成したフェードインフェードアウトのふわっと切り替わるスライドショーです。
参考サイトはこちらです。

でもソースをコピーしたら、JavaScriptのprefixfree.jsの展開分の存在に驚かれるでしょう。
実はこれは、このスライドショーの動作自体には、全然無関係のJavaScriptです。
しかしこれがないと、CSSの記述が膨大になるのです。

最新のCSSはいろいろな機能ができたのと引き換えに、各ブラウザに対応させるために、一つの動きに各ブラウザ専用の接頭語(ベンダープレフィックス)が必要になりました。
詳細はHOMEページのCSSの記述(接頭語)についてをご覧下さい。とにかくCSSの記述が長ったらしく面倒になったのです。

そして、その記述をせずに済ませることができるJavaScriptが、prefixfree.js なのです。
だけどこれもけっこうな量だし、他のページでも使う可能性もあるので、できれば説明にある通り外部jsにされた方が、簡単かもしれません。

ここでは外部jsではなく、コピペでできるように展開して同じhtmlの中に記述しています。
外部jsにして、呼び出しの記述をされた方は、この部分は削除して下さい。

CSSとJavaScriptのスライドショーの違いを説明します。
１．スライド画像の枚数の増減方法
JavaScriptは簡単。画像ファイル名を下に追加するか、削除するだけ。
CSSは面倒。画像ファイル名を増減するだけでなく、CSSの書き替えが必要。今回、原本は4枚だったのを5枚に増加させ、その変更方法も説明しています。結構面倒です。


２．同ページで、スライドショーの複数設置
JavaScriptは面倒。同じ変数等が使用できません。　修正(2014年7月8日) : 同じ画像枚数、同じ切替速度なら、それほど面倒ではありません。
CSSは簡単。超簡単♪です。
同じ切替速度、同じ枚数しか使用できないという制限はありますが、同じclass名を指定するだけで、違う画像、違うサイズのスライドショーを設置できます。
今回、花と猫のスライドショーを同ページで設置しています。＜div class="slides"＞〜＜/div＞で囲むだけで何個でも設置できます。
横並び表示にするためにtableタグで囲みましたが、不要ならtableタグは削除して下さい。


３．フェード方法
JavaScriptに関しては多様な方法があるのですが、当サイトで私が応用できる方法は１種類しか知らないので、スライドショーの簡単バージョンの動きだけです。
CSSに関しては、この見本が最初です。
写真の花に関しては、綺麗なフェードだと思います。でもイラストの猫に関しては、できそこないのGIFアニメみたいな動き。
同じフェード方法なのに、この見本はイラストには向かないなと思いました。
たぶん、もっと改良できると思います。