【Javascript】スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」

(2016年11月3日)
カテゴリ: WEB
 こんにちはWEBデザイナーの弓削です。

WEBサイトで、画面をスクロールすると画像や文字等がアニメーションしながら表示される演出は各所で行われていますが、
scrollRevealもその一つです。

前提で必要となるものも少なくて、
オプションも使いやすく、様々な動きが可能なので結構便利なのですが、
スクリプトのバージョンが3になった事で、それ以前のバージョンの記述方法とはかなり変更点があったようで、
参考になるサイトが少なかったのでメモしておきます。

scrollRevealとは


scrollReveal

scrollRevealは、web画面をスクロールした際に、
画像やテキスト等の要素がアニメーションしながら表示するスクリプトです。
公式サイトでも動きが参照いただけます。
scrollReveal
https://scrollrevealjs.org/


scrollRevealの使い方


scrollRevealを導入するには、「scrollreveal.min.js」が必要となります。GitHubよりファイルをダウンロードしましょう。
GitHub
https://github.com/jlmakes/scrollreveal.js

沢山ファイルがありますが必要なのは「scrollreveal.min.js」のみです。
ダウンロードしたscrollreveal.min.jsを、</body>上あたりに読み込みましょう。


次に、動かしたい画像やテキストがあるboxを指定したスクリプトを記述しましょう。
例では.boxというclassを動かす場合のイメージです。




あとは、該当のclassが記述されたboxを書いたら終わりです。




実際の動きに関してはDEMOページを作成していますのでそちらをご参照ください。
scrollRevealのデモページ
http://www.merges.co.jp/demo/scrollreveal.php


記事中での説明は基本的な動きのみですが、
用意しているデモページの方では、オプションでの動きの説明も行っています。ぜひご参照くださいませ。
弓削篤史(WEBディレクター、デザイナー)
like 革鞄づくり、カレーづくり、キャンプ、カラオケ 等