ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スクロールを使った面白い処理です。

Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています(描画が遅いので)。

他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。

デモを表示しました。このタイミングではイベントは発動していません。
デモを表示しました。このタイミングではイベントは発動していません。

Demosを表示。この時点でイベントが発動します。
Demosを表示。この時点でイベントが発動します。

使い方は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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2