今回は、スクロールで要素が表示された時に、フワッとしたアニメーションで表示する「ScrollReveal.js」を紹介します。
各要素を時間差で表示させることも出来るので、例えば複数の画像を同時に表示するのではなく、順番に表示させることも出来ます。
使い方
まずは、ライブラリをHTMLに読み込みます。
ソース
<script src="https://unpkg.com/scrollreveal"></script>
次にアニメーションさせたい要素にクラスを付与します。
今回は「anime_box」としました。画像のパスは任意に変更してください。
ソース
<div class="anime_box"><img src="img/img01.jpg"></div>
最後に、下記のコードをHTMLで呼び出します。幾つかオプションも追加しています。
ソース
<script>
ScrollReveal().reveal('.anime_box', {
distance: '50px',
duration: 1000,
viewFactor: 0.5,
origin: 'bottom',
reset: false
});
</script>
ScrollReveal().reveal('.anime_box', {
distance: '50px',
duration: 1000,
viewFactor: 0.5,
origin: 'bottom',
reset: false
});
</script>
オプションを幾つかまとめました。
オプション
distance: '50px',/*表示されてから要素が移動する距離*/
duration: 1000,/*アニメーションの時間*/
viewFactor: 0.5,/*要素がどこまで表示されたらアニメーションを実行するか（1の場合100％）*/
origin: 'bottom',/*要素を動かす方向（top/right/bottom/left）*/
delay: 200,/*アニメーションを実行させるまでの時間*/
desktop: false,/*PCで有効にするか（true/false）*/
mobile: false,/*スマホで有効にするか*/
reset: false/*1回だけ動かすか*/
duration: 1000,/*アニメーションの時間*/
viewFactor: 0.5,/*要素がどこまで表示されたらアニメーションを実行するか（1の場合100％）*/
origin: 'bottom',/*要素を動かす方向（top/right/bottom/left）*/
delay: 200,/*アニメーションを実行させるまでの時間*/
desktop: false,/*PCで有効にするか（true/false）*/
mobile: false,/*スマホで有効にするか*/
reset: false/*1回だけ動かすか*/
さらに、クラスを付与してオプションを利用すれば、時間差で表示する事が出来ます。
ソース
ScrollReveal().reveal('.item01', {
delay: 200,
});
ScrollReveal().reveal('.item02', {
delay: 500,
});
ScrollReveal().reveal('.item03', {
delay: 800,
});
delay: 200,
});
ScrollReveal().reveal('.item02', {
delay: 500,
});
ScrollReveal().reveal('.item03', {
delay: 800,
});
通常のアニメーション表示と、時間差の表示をデモでご覧いただけます。
デモページを見る
「ScrollReveal.js」は、簡単に利用できるため、おすすめです。