要素が画面に表示されたら、ふわっと表示させたり、下から表示させたりするアニメーションを実装します。

jsの読み込み

ちらつきを防ぐため、jsを先に読み込む必要があります。
<head>〜</head> 内に記述します。

CDNで読み込む場合

<script src="https://unpkg.com/scrollreveal"></script>

自分のサーバーにアップロードして読み込む場合（記述例）

<script src="任意のパス/scrollreveal.min.js"></script>

要素を非表示

ちらつきを防ぐために、読み込み時は要素を非表示にします。
html.sr をつけることで、jsが読み込まれていない場合に要素が表示されないことを防ぎます。
「.load-hidden」の部分は、設定した名前に変更してください。

html.sr .load-hidden {
  visibility: hidden;
}

参考：User Experience — ScrollReveal

オプションの設定例

ScrollReveal().reveal('.js-scroll-up', {
  duration: 1500, // アニメーションの完了にかかる時間
  delay: 500, // アニメーション開始までの時間
  viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
  origin: 'bottom', // 要素がどの方向から来るか
  distance: '30px' // 表示された時に要素が移動する距離
});

Lazy Load（画像遅延読み込み）と併用した際の不具合

Lazy Loadと併用すると、画像が読み込まれていない状態で高さが計算されるため、要素が画面内に表示される前に、スクロールイベントが発生してしまいます。
ダミー画像に高さを持たせるなどの対応が必要です。

Lazy Load（画像の遅延読み込み）するプラグイン lazySizes.js