メインコンテンツまで移動する

Cocoon の一覧リストにスクロールアニメーションを適用するカスタマイズ

  • 公開日
  • 更新日

Akira Web デザイナー

動作

WordPress テーマ Cocoon の一覧リストに、スクロールに応じたアニメーションを実装するカスタマイズの紹介です。

カスタマイズは 2 ステップの 100％ コピペででき、カスタマイズ所要時間は 2 ~ 3 分ほどです。

まずは、完成図をご覧ください。画面内に入ったカードが、ふんわりと表示されます。

執筆時点の Cocoon の一覧リストには、7 種類のカードタイプがあります。どのカードタイプを選んでも、今回のアニメーションを実装できます。

JavaScript を追加

まずは、子テーマの javascript.js にコードを追加します。

ただ、アニメーションの動く回数が異なる 2 つのコードがあります。お好みに合わせてコードを選択します。

何回でもアニメーションが動くコード

一覧リストのカードが画面内に入る度に、アニメーションが動くタイプです。

何回でもアニメーションを動かしたい場合は、下記のコードを子テーマの javascript.js に追加します。

{
  const cards = document.querySelectorAll('.entry-card-wrap');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('list-animation');
      } else {
        entry.target.classList.remove('list-animation');
      }
    });
  });

  cards.forEach((card) => {
    observer.observe(card);
  });
}

1 回のみアニメーションが動くコード

一覧リストのカードが最初に画面内に入った時のみ、アニメーションが動くタイプです。1 度アニメーションが動いたカードは、再び画面内に入ってもアニメーションが動きません。

何回もアニメーションが動くのは避けたい場合は、下記のコードを子テーマの javascript.js に追加します。

{
  const cards = document.querySelectorAll('.entry-card-wrap');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('list-animation');
        observer.unobserve(entry.target);
      }
    });
  });

  cards.forEach((card) => {
    observer.observe(card);
  });
}

CSS を追加

最後に CSS を指定すれば終わりです。

子テーマの style.css に CSS を追加します。

.list {
  overflow: hidden;
}

.list-animation {
  animation: list-animation 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes list-animation {
  from {
    opacity: 0;
    transform: scale(1.1) translateY(24px);
  }

  32% {
    opacity: 0;
    transform: scale(1.1) translateY(24px);
  }
}

これで完成です。

おわりに

さらにカスタマイズをすれば、関連記事や投稿記事内の画像などにも今回のアニメーションを適用できます。

また、CSS の @keyframes の変更で、お好みのアニメーションを表現できます。

今回の Intersection observer によるアニメーションの詳細は、Intersection observer によるスクロールアニメーションで説明しています。

フォローする