WordPress（cocoon）おすすめアニメーション

今回のおすすめ

スクロールして現れたときに下→上へスッと浮く”アニメを簡単に付けられます。

手順①CSS を追加

外観 > カスタマイズ > 追加CSS に下記を貼り付け。

/* スライドアップの初期状態 */
.reveal-up{
  --slide-distance: 24px;           /* 移動距離：お好みで */
  --slide-duration: .7s;            /* 所要時間 */
  --slide-ease: cubic-bezier(.22,.61,.36,1);
  opacity: 0;
  transform: translateY(var(--slide-distance));
  transition:
    transform var(--slide-duration) var(--slide-ease),
    opacity   var(--slide-duration) var(--slide-ease);
  will-change: transform, opacity;
}

/* 画面内に入ったら最終状態 */
.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* アニメが苦手な方への配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ transition: none; }
}

手順①JS を追加

<script>
document.addEventListener('DOMContentLoaded', function(){
  const targets = document.querySelectorAll('.reveal-up');
  if (!('IntersectionObserver' in window) || targets.length === 0) return;

  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.isIntersecting){
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target); // 1回だけ再生したい場合
      }
    });
  }, { root: null, rootMargin: '0px 0px -10% 0px', threshold: 0.15 });

  targets.forEach(el => io.observe(el));
});
</script>

手順①対象の画像にクラスを付ける

ブロックエディターで画像ブロックを選択 → 右側の「高度な設定 > 追加CSSクラス」に
reveal-up と入力して更新。
（複数あれば必要な画像だけに付ければOK）

〇ポイント
1枚ごとに動きを付ける/付けないを選べます。

速度や距離は、画像ごとに style で上書き可能：
例）style="--slide-distance:40px; --slide-duration:.9s"