【jQuery】画像をフェードしながらスクロールさせるcrossfade.jsプラグイン

2015.03.09   2222


画面のスクロールに合わせて任意の画像へフェードアウトさせるcrossfade.jsプラグインの使い方の紹介です。2枚の画像を組み合わせれば色々と面白いことが出来そうですね。画像を用意すればすぐに実装可能で簡単にオシャレなLPやWEBサービス紹介ページが出来ちゃいます。

百聞は一見にしかず。まずはデモを見てみてください。

crossfade.jsプラグインのオススメ/ポイント

  •   スクロールに合わせて画像を次の任意の画像にフェードアウトさせることが出来る
  •   逆にスクロールしてもフェードアウトする
  •   スマホにも対応

crossfade.jsプラグインのデモ


crossfade.jsプラグインのページ


crossfade.jsプラグインの使い方

それではcrossfade.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

もっと下にスクロールさせてみて

Try it. Scroll down.

画像を2枚使ってフェードさせよう

わざと2枚目にボヤケた画像を使用しているサンプル


チェックポイント

1つ目のsectionと2つ目のsectionは敢えてプラグインの使い方を変えています。

CSSコード


チェックポイント

CSSはお好みで指定して下さい。これはサンプル用のCSSです。

JavaScriptコード




チェックポイント

HTMLのチェックポイントでも書きましたが、1つ目のsectionと2つ目のsectionでプラグインの使い方を変えています。1つ目のsectionでは画像URLをタグで直接指定しています。2つ目はjavascript内で指定しているという違いですね。お好みでどちらかを指定して下さい。

またthresholdオプションは0〜1の間で指定して、値が0に近いほど速くフェードアウトします。

プラグインへ一言

これはWEBサービス紹介用ページに最適だね!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております