ページ内スクロールで要素が横からスライドインする方法

この記事では、ページをスクロールしたときに、要素が左右からスライドインして表示される「スライドインアニメーション」を実装する方法をご紹介します。
JavaScriptとCSSを組み合わせることで、どのテーマでも簡単に使えます。

1 HTML構造

<div class="slidein-left">
  <p>左からスライドインします。</p>
</div>

<div class="slidein-right">
  <p>右からスライドインします。</p>
</div>

スライドインさせたい要素に、slidein-left または slidein-right クラスを付けます。

2 functions.phpにコードを追加

//-------------------------------------------
// スライドインアニメーション
//-------------------------------------------
function my_scroll_slidein_script() {
    wp_enqueue_script(
        'scroll-slidein',
        get_stylesheet_directory_uri() . '/js/scroll-slidein.js',
        array(),
        '1.0.0',
        true // フッターで読み込み
    );
}
add_action('wp_enqueue_scripts', 'my_scroll_slidein_script');

3 汎用CSS

/* -----------------------------
 * スライドイン共通設定
 * ----------------------------- */

/* .slidein-left と .slidein-right 共通の初期設定 */
.slidein-left, .slidein-right {
  opacity: 0; /* 初期状態では透明にする */
  transition: all 0.8s ease-out; /* すべての変化（位置・透明度など）を0.8秒かけて滑らかに */
}

/* 左からスライドインする場合の初期位置 */
.slidein-left {
  transform: translateX(-50px); /* 左に50pxずらして非表示状態に */
}

/* 右からスライドインする場合の初期位置 */
.slidein-right {
  transform: translateX(50px); /* 右に50pxずらして非表示状態に */
}

/* 表示時のスタイル：元の位置に戻す */
.slidein-left.show, .slidein-right.show {
  opacity: 1; /* 完全に表示 */
  transform: translateX(0); /* 元の位置に戻す */
}

/* 複数要素を段階的に表示する場合の2番目の要素 */
.slidein-left:nth-child(2),
.slidein-right:nth-child(2) {
  transition-delay: 0.3s; /* 0.3秒遅らせてスライドイン */
}

/* 複数要素を段階的に表示する場合の3番目の要素 */
.slidein-left:nth-child(3),
.slidein-right:nth-child(3) {
  transition-delay: 0.6s; /* 0.6秒遅らせてスライドイン */
} /* スライドインアニメーション終了 */

3.1 テーマ別CSS補足

• Lightning：余白が多いセクション内で使う場合、paddingを少なめにして自然に見せましょう。
• Cocoon：.article 内の要素に適用してもOK。余白を広めに取るとより見栄え良くなります。

4 JavaScriptにコードを追加

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

//-------------------------------------------
// スライドインアニメーション
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  const slideElems = document.querySelectorAll(".slidein-left, .slidein-right");

  const showOnScroll = () => {
    const trigger = window.innerHeight * 0.85;
    slideElems.forEach(elem => {
      const rect = elem.getBoundingClientRect();
      if (rect.top < trigger) {
        elem.classList.add("show");
      } else {
        elem.classList.remove("show");
      }
    });
  };

  window.addEventListener("scroll", showOnScroll);
  showOnScroll(); // 初回ロード時にも判定
});

4.1 ディレクトリ構造

5 完成イメージ

下にスクロールすると、左右から要素がスライドインして表示されます。

6 まとめ

• HTML：slidein-left または slidein-right クラスを使用
• CSS：初期位置をX方向にずらし、transitionでスライド
• JS：スクロール時に show クラスを付与して発動

このスライドイン効果は、フェードインよりも「動きが強調される」ため、サービス紹介・実績一覧・LPセクションなどに最適です。