SANGOのカードにスクロールアニメーションを適用するカスタマイズ

SANGOアニメーションのイラスト

記事内で設置したSANGOの関連記事カードに、スクロールアニメーションを実装することで、ちょっとしたアクセントになります。

今回は、SANGOのカードにスクロールアニメーションを適用するカスタマイズについてご紹介します。

スクロールアニメーション実装後のサンプル

関連記事のカードが画面で表示された時に、ふんわりと表示されます。

1度アニメーションが動いたカードは、再び画面内に入ってもアニメーションが動きません。

なお、SANGOの関連記事のショートコードには2種類のカードタイプがありますが、どちらのカードタイプを選んでも今回のアニメーションを実装できます。

デザイナーのプロとアマチュアの違い デザインのプロとアマチュアの違い

アニメーションが動くコード

テーマの javascript.js のファイルにコードを追加します。

テーマにjavascript.js のファイルがない場合は、各ページのクロージング </body> タグのすぐ前に 以下のコードを <script>〜</script> の中に記述して設置しましょう。

コードを表示する

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

JavaScript

(function() {
  const list = document.querySelectorAll('.c_linkto');
  
  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);
  });
})();

トップページのカードに適応させるコード

JavaScriptの2行目を .cardtype__article に記述することで、トップページや、カテゴリー一覧のカードもこのアニメーションを適応させることができます。

コードを表示する

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

JavaScript

(function() {
  const list = document.querySelectorAll('.cardtype__article');
  
  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);
  });
})();