スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。
WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい!という場合にお勧めです。
しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。
ライセンスはMIT。
※2015年11月21日404だったリンク先を修正しました。
基本的な使い方
jQueryとプラグインファイルを読み込む
まず、jQueryライブラリ(1.4+)とプラグインのファイルを読み込み、プラグインを実行するための関数を記述します。
場所はbody閉じタグの直前が推奨されています。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.fadethis.min.js"></script>
<script>
$(window).fadeThis();
</script>
htmlの記述
あとはhtmlのプラグインを適用したい要素に、以下のようにクラス名を追加するだけです。
cssでは要素が最終的に表示される位置を指定しておけばOKです。
シンプルですね。
<div class="slide-left">左からスライド</div>
<div class="slide-right">右からスライド</div>
<div class="slide-top">上からスライド</div>
<div class="slide-bottom">下からスライド</div>
オプション
オプションで表示するスピードを指定したり、スライドするのを繰り返さないようにすることも出来ます。
表示するスピードの設定
<div class="slide-left" data-plugin-options='{"speed":500}'>
0.5秒で左からスライド
</div>
フェードイン・アウトを繰り返さない設定
以下の設定にすると、1度だけフェードイン・フェードアウトを行います。
<div class="slide-left" data-plugin-options='{"reverse": false}'>
1度だけ左からスライドして表示
</div>