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

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

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

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

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

今回の方法によるアニメーションは、IE で動きません。下記の 2 つの条件のどちらにも該当する場合は、対策が必要です。

• IE でもアニメーションを動かしたい
• Cocoon 設定の「高速化」で「Lazy Load を有効にする」が無効になっている

IE でアニメーションが動く必要がなければ、次のステップに進みます。また、Cocoon 設定の「高速化」で「Lazy Load を有効にする」が有効になっている場合も、次のステップに進みます。

2 つの条件のどちらにも該当する場合は、intersection-observer.js を子テーマの javascript.js に追加します。

やり方は簡単です。上記リンクを開いた後に「Raw」をクリックすると、ブラウザのタブにコードが表示されます。

表示されたコードを ctrl + a で全て選択後にコピーをし、子テーマの javascript.js の 1 番上（javascript.js に最初から書かれている説明後の 4 行目から）に貼り付けます。貼り付け後の javascript.js の状態は、下記のとおりです。

//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
 *
 *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
 */
(function() {
'use strict';

// Exit early if we're not running in a browser.
if (typeof window !== 'object') {
  return;
}
以下省略

今後、javascript.js にコードを書く場合は、追加したコードの下に書いていきます。

これで IE でもアニメーションが動きます。

尚、追加する intersection-observer.js は 700 行を超えるため、JavaScript Minifier や Online JavaScript/CSS/HTML Compressor などでコードを縮小した後に追加しても構いません（縮小すると 1 行になります）。

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

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

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

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

  Array.prototype.forEach.call(list, function(card) {
    observer.observe(card);
  });
})();

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

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

  Array.prototype.forEach.call(list, function(card) {
    observer.observe(card);
  });
})();

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

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

.list {
  overflow: hidden;
}

.list-animation {
  animation: list-animation 1.2s cubic-bezier(.4, 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 によるスクロールアニメーションで説明しています。