弓削篤史（デザイナー／撮影／広報）
写真・動画撮影、サイトデザイン・コーディング、CMS導入やPHPを使ったWEBプログラミングに携わっています。
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
お知らせ
NEWS
【Javascript】スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」
2016年11月3日
／マージBLOG、WEB制作
WEBサイトで、画面をスクロールすると画像や文字等がアニメーションしながら表示される演出は各所で行われていますが、
scrollRevealもその一つです。
前提で必要となるものも少なくて、
オプションも使いやすく、様々な動きが可能なので結構便利なのですが、
スクリプトのバージョンが3になった事で、それ以前のバージョンの記述方法とはかなり変更点があったようで、
参考になるサイトが少なかったのでメモしておきます。
scrollRevealとは
scrollRevealは、web画面をスクロールした際に、
画像やテキスト等の要素がアニメーションしながら表示するスクリプトです。
公式サイトでも動きが参照いただけます。
- scrollReveal
- https://scrollrevealjs.org/
scrollRevealの使い方
scrollRevealを導入するには、「scrollreveal.min.js」が必要となります。GitHubよりファイルをダウンロードしましょう。
沢山ファイルがありますが必要なのは「scrollreveal.min.js」のみです。
ダウンロードしたscrollreveal.min.jsを、</body>上あたりに読み込みましょう。
次に、動かしたい画像やテキストがあるboxを指定したスクリプトを記述しましょう。
例では.boxというclassを動かす場合のイメージです。
あとは、該当のclassが記述されたboxを書いたら終わりです。
実際の動きに関してはDEMOページを作成していますのでそちらをご参照ください。
- scrollRevealのデモページ
- https://www.merges.co.jp/demo/scrollreveal.php
記事中での説明は基本的な動きのみですが、
用意しているデモページの方では、オプションでの動きの説明も行っています。ぜひご参照くださいませ。
