onScreen - 使い道が多そう。表示されたら発動するイベント処理
スクロールを使った面白い処理です。
Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています(描画が遅いので)。
他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。
使い方はjQueryプラグインなのでシンプルです。
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// 表示されたタイミングの処理
},
doOut: function() {
// 非表示になったタイミングでの処理
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
画像の遅延読み込みにも対応していますので、帯域の浪費を防止するのにも使えそうです。directionパラメータで縦、横向きを指定しているのでスマートフォン、タブレットの場合はその辺りが注意が必要かも知れません。 最近はシングルページ、パララックスイフェクトを使ったページが増えていますが、そういったスクロールを上手につかったサイトのアクセントにも良さそうですね。 onScreenはjQuery/JavaScritpt製のオープンソース・ソフトウェア(MIT License)です。 silvestreh/onScreen