ScrollReveal.js

ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。

以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。

ScrollReveal : http://scrollrevealjs.org

要素がviewportに現れたタイミングで様々な表示処理を施すことができます。

なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。

［ScrollReveal］の使い方

［ScrollReveal］の導入方法はカンタンです。

まずはGitHubから必要なファイルをダウンロードしてきます。

https://github.com/jlmakes/scrollreveal.js

「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。

入手したzipファイルを解凍するとフォルダの中に「scrollreveal.min.js」が入っています。
このjsファイルをHTMLの適当な箇所で読み込みます。

<script src="/js/scrollreveal.min.js"></script>

実は「ScrollReveal」はCDNでも配信されています。
手抜きをしたいなら上記コードの代わりに以下のコードを使いましょう。

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.3/scrollreveal.min.js"></script>

CDNで高速配信されるのでコチラの方が便利かもしれませんね。

どちらの方法でも構いませんが、こうしてjsファイルを読み込ませたら、ついでに［ScrollReveal］を初期化するためのコードも記述してしまいましょう。
以下のコードを書き加えればOKです。

<script>
window.sr= new scrollReveal();
sr.reveal('.sample');
</script>

ここではクラス名「class="sample"」を指定した要素に処理を施しています。当然HTMLは次のようになりますね。

<div class="sample"></div>

基本的にはこれで完了。
より詳しく動作を指定する際は JavaScript のコードで追記が必要ですが、ここまでの導入方法でも充分に活用できるクオリティです。

ScrollReveal : http://scrollrevealjs.org

最後に

実はこのスクリプト、弊社のウェブサイト（2016年1月現在）でも所々で利用していますが、お気付きでしたでしょうか。
非常に高機能で、jQuery不要で利用可能。動きもスムーズですので自信を持ってオススメできるプラグインです。
ぜひお試しください。