ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。
以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。
ScrollReveal : https://scrollrevealjs.org
要素がviewportに現れたタイミングで様々な表示処理を施すことができます。
なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。
［ScrollReveal］の使い方
［ScrollReveal］の導入方法はカンタンです。
まずはGitHubから必要なファイルをダウンロードしてきます。
「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。
入手したzipファイルを解凍するとフォルダの中に「scrollreveal.min.js」が入っています。
このjsファイルをHTMLの適当な箇所で読み込みます。
<script src="/js/scrollreveal.min.js"></script>
実は「ScrollReveal」はCDNでも配信されています。
手抜きをしたいなら上記コードの代わりに以下のコードを使いましょう。
<script src="//unpkg.com/scrollreveal"></script>
CDNで高速配信されるのでコチラの方が便利かもしれませんね。
どちらの方法でも構いませんが、こうしてjsファイルを読み込ませたら、ついでに［ScrollReveal］を初期化するためのコードも記述してしまいましょう。
以下のコードを書き加えればOKです。
<script>
ScrollReveal().reveal('.example')
</script>
ここではクラス名「class=”example”」を指定した要素に処理を施しています。当然HTMLは次のようになりますね。
<div class="example"></div>
基本的にはこれで完了。
より詳しく動作を指定する際は JavaScript のコードで追記が必要ですが、ここまでの導入方法でも充分に活用できるクオリティです。
オプション設定
ScrollRevealには動きを細かく指定できるオプションが用意されています。
以下、よく使われるであろうオプションを抜粋しました。
| オプション | 値 | 内容 |
|---|---|---|
| origin | top/right/bottom/left | どの方向からスライドインさせるか？ |
| distance | px/em/% | 動く距離を指定 |
| scale | 0〜 の数値 (1.5 等) | 拡大・縮小の大きさ |
| rotate | 0〜 の数値 (300 等) | 回転 |
| delay | ミリ秒単位の時間 | アニメーションが実行されるまでの時間 |
| duration | ミリ秒単位の時間 | アニメーションの完了にかかる時間 |
| delay | ミリ秒単位の時間 | アニメーションが実行されるまでの時間 |
| interval | ミリ秒単位の時間 | 各公開間の時間 |
| opacity | 0~1 | 表示される前の不透明度 |
| desktop | true(有効)/false(無効) | デスクトップでアニメーションを有効/無効 |
| mobile | true(有効)/false(無効) | モバイルでアニメーションを有効/無効 |
| reset | true(有効)/false(無効) | 表示後に一旦離れて戻った時のアニメーション有効/無効の設定 |
各オプションは組み合わせて実装可能です。
例えば「scaleを0.8」にして「durationでアニメーションを遅らせる」のような調節も比較的簡単にできるでしょう。
ScrollReveal : http://scrollrevealjs.org
最後に
実はこのスクリプト、弊社のウェブサイト（2016年1月現在）でも所々で利用していますが、お気付きでしたでしょうか。
非常に高機能で、jQuery不要で利用可能。動きもスムーズですので自信を持ってオススメできるプラグインです。
ぜひお試しください。
