[JavaScript] Lozad.js を使ってスクロールにあわせたふわっとアニメーションを実装する

Lozad.js は、ウェブページのパフォーマンスを向上させるために遅延読み込み（Lazy loading）を実装するライブラリです。
Lozad.js を使用すると、ユーザーがスクロールして初めて要素が表示範囲に入る時に、その要素を「ふわっ」と表示させるようなアニメーションも実装できます。

他の多くのスクロール監視ライブラリは scroll イベントと getBoundingClientRect() メソッドを使って要素の位置を追跡します。
しかし、Lozad.js は Intersection Observer API を利用しており、これはブラウザのリソースをより効率的に使用します。
Intersection Observer APIを使うことで、スクロールイベントを監視することなく要素が表示領域に入るのを検出でき、パフォーマンスが向上します。

実装手順

HTML のマークアップ

html

<p class="lozad">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus nisi saepe atque illo ea odio, doloremque nihil rem molestiae delectus provident exercitationem modi illum odit unde similique officiis, laborum iusto!
</p>
<p class="lozad">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus nisi saepe atque illo ea odio, doloremque nihil rem molestiae delectus provident exercitationem modi illum odit unde similique officiis, laborum iusto!
</p>
<!-- ...以下つづく -->

<!-- lozad.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js" integrity="sha256-50cmb3K6Zka/WMfXLFzqyo5+P+ue2JdsyEmSEsU58s4=" crossorigin="anonymous"></script>

CSSスタイリング

css

/* 初期状態では透明で、やや下に配置 */
p {
  opacity: 0;
  transform: translate3d(0, 1em, 0);
  transition: 
    opacity 0.2s linear,
    transform 0.6s ease-out;
}

p[data-loaded="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

JavaScriptのセットアップ

javascript

document.addEventListener('DOMContentLoaded', function() {
  var observer = lozad('.lozad', {
    rootMargin: '0% 0% -50% 0%' // ← rootMarginの指定が重要！
  })
  observer.observe()
})

rootMarginの詳細

rootMargin は要素がどの程度の位置で視界に入ったとみなされるかを定義します。
例えば、rootMargin: '0% 0% -50% 0%' は要素がビューポートの中央に達した時に読み込みがトリガーされることを意味します。
マイナスの値を使用することで、要素が完全にビューポートに入る前にアクションを開始できます。

アニメーションのカスタマイズ

Lozad.jsは、要素が読み込まれたときに特定のアニメーションや効果を適用する機能も提供します。
loaded コールバックを使用して、要素がロードされた後に特定のJavaScriptアニメーション（例：TweenMaxでのバウンスエフェクト）を実行することが可能です。

アニメーションライブラリの追加

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>

アニメーションの適用

javascript

document.addEventListener('DOMContentLoaded', function() {
  var observer = lozad('.lozad', {
    rootMargin: '0% 0% -50%',
    loaded: function(el) {
      TweenMax.to(el, 1, {
        opacity: 1,
        scale: 1,
        ease: Bounce.easeOut
      });
    }
  });
  observer.observe();
});

注意事項

Lozad.jsはモダンブラウザで効果的に動作しますが、Internet Explorer 11などの古いブラウザではIntersection Observer APIがサポートされていないため、Polyfillを利用することが推奨されます。
これにより、より広い範囲のブラウザでLozad.jsを使用することが可能になります。