flexsliderを使って景色写真のフェードを行うアイデア

  • このエントリーをはてなブックマークに追加

フェードイン・フェードアウトの機能はjQueryプラグインのbxsliderを利用すれば実現可能。
フェードイン・フェードアウトというのは画像をふわっと半透明にさせていき、次の画像と半透明になり重なりながら次の画像に変化するというエフェクト。

デフォルトのフェードイン・フェードアウトでも、画像を4枚ほど使用すればかなり良い物に仕上がる。

簡単なフェードイン・フェードアウト

  1. 画像を複数枚用意する
  2. フェード時間を特に変えない

フェードイン・フェードアウトを停止せずに常に行う

モーションの経過のようにする方法。だまし絵のような画像を2枚用意するとオモシロイ。

  1. 一部分のみ変化した、同じような画像を2枚用意する
  2. フェードする経過の時間を10秒ほどにする
  3. ループさせない