スクロールで画像が左上から右下に開くアニメーションを表示する方法

この記事では、投稿ページと固定ページのみで、スクロールして画像が見えた瞬間に「左上から右下へ開く」ように表示されるアニメーションを実装します。
お知らせやアーカイブ・カテゴリ一覧などには影響しません。

1 functions.php にコードを追加

//------------------------------------------------------
// 投稿・固定ページでスクロール時に斜めアニメーションを適用 
//------------------------------------------------------
add_action('wp_enqueue_scripts', function() {
    if ( is_single() || is_page() ) { /** 投稿・固定ページのみ */
        /** CSS追加 */
        wp_add_inline_style('wp-block-library', '
            .diagonal-open img {
                opacity: 0; /** 初期は非表示 */
                transform-origin: top left; /** 左上を軸に */
                transform: rotate(-25deg) scale(0.6) translate(-20px, -20px); /** 傾き・縮小状態 */
                transition: all 1s ease-out; /** アニメーション速度 */
            }
            .diagonal-open.show img {
                opacity: 1; /** 表示 */
                transform: rotate(0deg) scale(1) translate(0, 0); /** 正常表示 */
            }
        ');

        /** JavaScript追加 */
        wp_add_inline_script('jquery-core', '
            document.addEventListener("DOMContentLoaded", function() {
                const targets = document.querySelectorAll(".diagonal-open");
                const observer = new IntersectionObserver(entries => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add("show"); /** 画面に入ったら発動 */
                            observer.unobserve(entry.target); /** 一度だけ実行 */
                        }
                    });
                }, { threshold: 0.3 }); /** 30％見えたら発火 */
                targets.forEach(target => observer.observe(target));
            });
        ');
    }
});

is_single() || is_page() により、投稿ページと固定ページのみで動作します。

2 Javascriptにコードを追加

ファイル名：scroll-diagonal-open.js
保存先：wp-content/themes/child-theme/scroll-diagonal-open.js

// ---------------------------------------------
// スクロールでアニメーションを発火させるJS
// ---------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  const targets = document.querySelectorAll(".diagonal-open");
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show"); /** 表示開始 */
        observer.unobserve(entry.target); /** 一度のみ実行 */
      }
    });
  }, { threshold: 0.3 }); /** 30％見えたら発火 */
  targets.forEach(target => observer.observe(target));
});

2.1 ディレクトリ構造

3 本文内のHTML

投稿や固定ページ本文に以下のHTMLを追加します。

<div class="diagonal-open">
  <img src="https://sample.com/wp-content/uploads/20××/××/parallax-bg.jpg" alt="サンプル画像">
</div>

これで、画像が画面内に入った瞬間に「左上から右下へ」パタッと開きながらフェードインします。

4 直接CSSを使う場合

/* --------------------------------------------- 
 * 左上から右下に開くアニメーション（スクロール発火）
 * --------------------------------------------- */

.diagonal-open img {
  opacity: 0; /** 非表示 */
  transform-origin: top left; /** 左上を軸に */
  transform: rotate(-25deg) scale(0.6) translate(-20px, -20px); /** 傾き縮小 */
  transition: all 1s ease-out; /** 滑らか変化 */
}
.diagonal-open.show img {
  opacity: 1; /** 表示 */
  transform: rotate(0deg) scale(1) translate(0, 0); /** 元の形に */
}

5 完成イメージ

6 まとめ

• スクロールで「左上→右下」方向に開くアニメーションを実装
• 投稿ページと固定ページのみに限定して動作
• Intersection Observerで軽量＆スムーズ
• 他ページ（お知らせ・カテゴリ・アーカイブ）には一切影響なし