スクロールするとふわっと現れる ScrollReveal

よく見かけるコンテンツのパーツごとにふわっとフェードインさせるアニメーションです。

ScrollRevealの使い方

CDNよりスクリプトを読み込み、アニメーションを設定します。

<script src="https://unpkg.com/scrollreveal"></script>
<script>
       window.sr = ScrollReveal({ reset: true ,mobile: true});
       sr.reveal( '.left', { origin: 'left' , distance: '100%', duration: 1500 , scale: 0, delay :500 ,opacity: 0,});
       sr.reveal( '.right', { origin: 'right' , distance: '100%', duration: 1500 , scale: 1.0, delay :500 ,opacity: 0.5,});
</script>
</body>

オプション一覧

origin: どの方向から表れるかを設定する項目：値は’bottom’, ‘left’, ‘top’, ‘right’
distance: どれぐらいの距離からアニメーションを開始するか：値は50%など数値で単位は%,em,px,vwなど
duration: アニメーションが完了するまでの速度：値は100など数値。単位はミリ秒
delay: アニメーション開始までの待機時間：値は100など数値。単位はミリ秒
scale: 何倍のサイズから表れるか設定する項目：値は0〜、基準値は1で等倍
opacity: アニメーション開始時の透明度：値は0.5など。0で透明、1で不透明になる。
mobile: モバイル時でもアニメーションを適用するか
reset: 要素が見えるたびにアニメーション表示させるか
useDelay: delayで設定したアニメーションを適用するタイミング
viewFactor: 要素自身の高さの何％がビューポートに入ったらアニメーションを開始するか：値は1の場合100％を意味する。

オプション使用例

<script>
window.sr = ScrollReveal();
sr.reveal('.parallax', {
  easing: 'ease', //イージング('ease' 'ease-in' 'ease-out' 'ease-in-out'など)
  origin: 'bottom', //アニメーションの基点
  duration: 500, //アニメーションの時間
  distance: '50px', //アニメーションの距離
  delay: 0, //アニメーションの遅延
  useDelay: 'always', //遅延の条件('always' 'once' 'onload')
  opacity: 0, //アニメーション開始時の透明度
  scale: 0.8, //アニメーション開始時のスケール
  container: '.fooContainer', //アニメーションを実装するコンテナ
  rotate: { x: 0, y: 0, z: 0 }, //アニメーション開始時の傾き
  mobile: true, //falseにするとモバイルでのアニメーション停止
  reset: false, //trueにすると表示の度にアニメーション再生
  viewFactor: 0.2, //アニメーションを開始するために必要な要素の表示割合
  viewOffset: { top: 0, right: 0, bottom: 0, left: 0 } //要素のオフセット。固定ヘッダーなどがある場合に指定
});
</script>

html内の各タグにclassを設定する

<div class="left">
ふわっ動かしたいコンテンツ
</div>