[JS]デモがバツグンにかっこいい！さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen
Post on:2013年11月7日
sponsors
ブログのように記事のサムネイルを縦長に配置したり、画像ギャラリーのように画像を垂直・水平に配置したり、ブラウザの表示範囲外の要素を水平・垂直スクロールで表示する時にちょっと素敵なエフェクトを加えるjQueryのプラグインを紹介します。
ユーザー全員が気がつくエフェクトではないですが、こーゆの好物です。
onScreenのデモ
4種類のデモが楽しめます。
この4つのサークルの表示もかっこいいｗ
ページの下部にスクロールすると、ビューポートに入ってくる要素をアニメーションで表示します。
下部で、ちょうどアニメーション化しているキャプチャです。
Lazy Loadは画像を遅延表示するエフェクトで、今までに紹介したのとは一味違った感じです。
一つ目のデモ「Append New Elements」の水平版ですが、右から要素がフェードインしてアニメーションします。
onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。
スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。
onScreenの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトを外部ファイルとして記述します。
<head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head>
Step 2: HTML
onScreenを適用するエレメントは指定できるようにclassやidを付与します。
<section class="posts"> <article class="post">記事</article> </section>
Step 3: JavaScript
適用する要素をjQueryのセレクタで指定し、スクリプトを実行します。
$('article.post').onScreen({});
スクリプトのオプションでは、コンテナの指定、方向、遅延時の表示画像、in時out時のエフェクトなどを設定できます。
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// Do something to the matched elements as they come in
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
toggleClass: true,
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
sponsors
