Cocoon の一覧リストに心地よいスクロールアニメーション

WordPressテーマCocoonの一覧リストのカードが表示されると動くアニメーション

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

7 月 1 日に正式リリースされた無料 WordPress テーマ「 Cocoon 」

驚愕するほどの多機能を誇る上に、万全の内部最適化と高速化対策がなされた超おすすめのテーマです。

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

完成図は、下の動画でご確認いただけます。画面内に入ったカードが、ふんわりと表示されます。

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

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

ステップ 1 : IE と Safari 、 iOS に対応するかを決める

今回ご紹介する方法は、そのままでは IE と Safari でアニメーションが動きません。

今回ご紹介する方法は、そのままでは IE と Safari 、 iOS でアニメーションが動きません。

もし、 IE と Safari 、 iOS でもアニメーションを動かしたい場合には、 intersection-observer.js を使います。

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

GitHubのintersection-observer.jsのページにあるRaw

表示されたコードを ctrl + a でコピーをし、「 Minify your JavaScript 」または「 Online JavaScript/CSS/HTML Compressor 」にペーストし縮小化します。

縮小化したコードを、子テーマの 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
 *
 */
 ここに縮小した intersection-observer.js を貼り付けます。

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

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

IE と Safari 、 iOS でアニメーションが動かなくてもいい場合には、コードを追加する必要はありません。

ステップ 2 : JavaScript を追加

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

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

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

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

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

( 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 );
    });
})();

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

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

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

( 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 );
    });
})();

ステップ 3 : CSS を追加

最後に 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 によるアニメーションは、「ブラウザにやさしくスクロールで画面に入った要素にアニメーション」でご説明しています。