スクロールしたタイミングでフェードイン・アウトを繰り返すFadeThisを使ってみた

スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。
WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい!という場合にお勧めです。
しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。
ライセンスはMIT。

FadeThis-配布サイト

※2015年11月21日404だったリンク先を修正しました。

デモページ

基本的な使い方

まず、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のプラグインを適用したい要素に、以下のようにクラス名を追加するだけです。
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>

フェードイン・アウトを繰り返さない設定

<div class="slide-left" data-plugin-options='{"reverse": false}'>
1度だけ左からスライドして表示
</div>

デモページ