スクロールしたら要素にclassを付けるだけのjQueryプラグインを作成しました

スクロール後、特定の要素がある位置まで画面内に現れたらその要素にclassを付けるというプラグインを作成しました。

文章だけ見ても「ナンノコッチャ」となりそうなので、デモページをご覧下さいませ。

 

デモページ

 

 

スライドインさせるだけのプラグインにしようかと思ったのですが、どうせならオプションを付けて設定をいじれる方が便利だな・・・と思ったのでこのような仕様にしております。

フェードイン以外にもcss次第で要素をバウンドさせたり、上下左右に移動させたり出来ます。

 

ソースをGitHubで公開していますので、ご自由にお使い下さい。

minifyしたソースを使いたい場合にはhtdocs内のファイルを、minify前のソースを使いたい場合にはsrc/以下のファイルをご利用下さい。

 

ダウンロードはこちらから

 

 

READMEにも記載していますが、使い方をざっくり説明・・・

実行に必要な記述は、他で公開されているjQueryプラグインとほぼ同じです。

 


var $el = $('クラスを追加する対象');
var options = {
 className: '追加するクラスの名前',
 devideHeight: '画面の高さを割る数字',
 timeout: '実行までの待機時間(ミリ秒)'
};

// 実行
$el.scrollAddClass(options);