ページをスクロールすると要素がアニメーションする!ScrollRevealの使い方

今回はページをスクロールすると要素がアニメーションするスクリプト「ScrollReveal」の使い方を解説します。

まずは公式ページでデモを見てみることをオススメします。スクロールに合わせて要素がアニメーションしているのが確認できると思います。

ScrollReveal公式

 

ScrollRevealの使い方

導入は簡単です。タウンロードして読み込むか、cdnで読み込みましょう。

個人的にはcdnの方がオススメなので、cdnを使います。

jsdeliverにて配布されているのでそのままコピペします。面倒な人は以下をコピペ。

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

 

スクリプトを読み込んだら、あとは以下のコードを書けばそれだけで動きます。

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

 

アニメーションさせたい要素のクラスを指定するとアニメーションするようになります。

 

基本的にはこれだけなのですが、細かい設定をすると色々はアニメーションをさせることができます。

詳しいことはこちらから参照できますが、英語なので頑張ってください。

今回はざっくりですがオプションも試してみます。

 

オプション

書き方はこんな感じ。

var ScrollrevealFade = {
	origin: 'left',
	distance: '0px',
	scale: 1,
	rotate: { x: 0, y: 0, z: 0 },
	duration: 1200, 
	delay :200 
};

sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100);

 

詳細は以下の通り。

  • origin:アニメーションの起点
  • distance:移動距離
  • scale:拡大度
  • rotate:回転(xは縦回転、yは横回転、zは傾き(風車みたいなイメージ))
  • duration:アニメーションの速度
  • delay:待機時間

 

注意点としては、数値やtrue/false以外の値はシングルクォーテーションで囲むようにしてください。じゃないとエラーが出ます。

例えばoriginなら’left’という感じです。

 

あとは自分の好きなように値をいじってみましょう。いろんな動きのアニメーションがみられるのは結構楽しいですからね。