[JS]デモがバツグンにかっこいい!さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen

ブログのように記事のサムネイルを縦長に配置したり、画像ギャラリーのように画像を垂直・水平に配置したり、ブラウザの表示範囲外の要素を水平・垂直スクロールで表示する時にちょっと素敵なエフェクトを加えるjQueryのプラグインを紹介します。

ユーザー全員が気がつくエフェクトではないですが、こーゆの好物です。

サイトのキャプチャ

onScreen
onScreen -GitHub

onScreenのデモ

4種類のデモが楽しめます。

サイトのキャプチャ

デモページ

この4つのサークルの表示もかっこいいw

デモのキャプチャ

Append New Elements

ページの下部にスクロールすると、ビューポートに入ってくる要素をアニメーションで表示します。

デモのキャプチャ

下部で、ちょうどアニメーション化しているキャプチャです。

デモのキャプチャ

Lazy Load

Lazy Loadは画像を遅延表示するエフェクトで、今までに紹介したのとは一味違った感じです。

デモのキャプチャ

Horizontal Scrolling

一つ目のデモ「Append New Elements」の水平版ですが、右から要素がフェードインしてアニメーションします。

デモのキャプチャ

Scrollable Containers

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
});

top of page

©2017 coliss