スクロールで上下左右からふわっと現れるフェードイン演出を作る方法

ページを下にスクロールしたとき、要素がふわっと上下左右から現れる「スクロール連動フェードイン」アニメーションを実装します。
CSSとJavaScriptだけで軽量に動作し、サイトを華やかに見せる演出として人気の効果です。

1 実装のポイント

• CSSで初期状態を透明＆位置ずらしに設定
• JavaScriptでスクロール位置を監視し、要素が表示範囲に入ったらクラスを付与
• フェードインの方向（上・下・左・右）を自由に指定可能

2 HTML構造

<div class="fade-container">
  <div class="fade-item fade-from-left">
    <a href="#" class="btn-border">左から右へ</a>
  </div>

  <div class="fade-item fade-from-right">
    <a href="#" class="btn-border">右から左へ</a>
  </div>
</div>

<div class="fade-container">
  <div class="fade-item fade-from-down">
    <a href="#" class="btn-border">上から下へ</a>
  </div>

  <div class="fade-item fade-from-up">
    <a href="#" class="btn-border">下から上へ</a>
  </div>
</div>
  

3 function.phpにコードを追加

//-------------------------------------------
// JavaScriptで要素を上下左右に動かす
//-------------------------------------------
function add_tab_script() {
    wp_enqueue_script(
        'tab-script',
        get_stylesheet_directory_uri() . '/js/tab.js', // jsフォルダ内のtab.jsを読み込む
        array(), // 依存なし
        false,
        true // フッターで読み込み
    );
}
add_action('wp_enqueue_scripts', 'add_tab_script');
  

4 footer.phpにコードを追加

//-------------------------------------------
// JavaScriptで要素を上下左右に動かす
//-------------------------------------------
document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('.fade-item');
  const scrollFade = () => {
    const trigger = window.innerHeight * 0.8;
    items.forEach((el) => {
      const rect = el.getBoundingClientRect();
      const visible = rect.top < trigger && rect.bottom > 0;
      if (visible) {
        el.classList.add('is-visible');
      } else {
        el.classList.remove('is-visible');
      }
    });
  };
  window.addEventListener('scroll', scrollFade);
  scrollFade();
});
  

4.1 ディレクトリ構造

5 javascript にコードを追加

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

//-------------------------------------------
// JavaScriptで要素を上下左右に動かす
//-------------------------------------------
document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('.fade-item');

  const scrollFade = () => {
    const trigger = window.innerHeight * 0.8; // トリガー位置（画面の80%位置）
    items.forEach((el) => {
      const rect = el.getBoundingClientRect();
      const visible = rect.top < trigger && rect.bottom > 0;

      if (visible) {
        el.classList.add('is-visible');
      } else {
        el.classList.remove('is-visible');
      }
    });
  };

  window.addEventListener('scroll', scrollFade);
  scrollFade(); // 初回実行
});
  

4.1 ディレクトリ構造

6 汎用CSS

/* -------------------------------------------
 * JavaScriptで要素を上下左右に動かす
 * ----------------------------------------- */

/* --- コンテナ --- */
.fade-container { /** 要素を囲む全体ボックス **/
  display: flex; /** 横並び **/
  flex-wrap: wrap; /** 折り返し許可 **/
  justify-content: center; /** 中央寄せ **/
  gap: 30px; /** 要素間の余白 **/
  margin: 80px auto; /** 上下余白 **/
  text-align: center; /** テキスト中央 **/
}

/* --- フェード共通設定 --- */
.fade-item { /** フェード対象の要素 **/
  opacity: 0; /** 初期は非表示 **/
  transform: translateY(0); /** 初期変形 **/
  transition: opacity 0.6s ease, transform 0.6s ease; /** スムーズに変化 **/
}

/* --- 各方向別の初期位置 --- */
.fade-from-up { /** 下から上へ出現 **/
  transform: translateY(50px);
}

.fade-from-down { /** 上から下へ出現 **/
  transform: translateY(-50px);
}

.fade-from-left { /** 右から左へ出現 **/
  transform: translateX(-50px);
}

.fade-from-right { /** 左から右へ出現 **/
  transform: translateX(50px);
}

/* --- スクロールイン時の状態 --- */
.is-visible { /** 表示トリガーが発火した状態 **/
  opacity: 1; /** 不透明に **/
  transform: translate(0, 0); /** 元の位置へ **/
}

/* --- デモ用ボタン装飾 --- */
.btn-border { /** 枠付きボタン **/
  display: inline-block; /** インラインブロック表示 **/
  padding: 12px 30px; /** 余白 **/
  border: 2px solid #ff6b6b; /** 枠線 **/
  border-radius: 6px; /** 角丸 **/
  color: #ff6b6b; /** 文字色 **/
  font-weight: bold; /** 太字 **/
  text-decoration: none; /** 下線消す **/
  transition: background 0.3s, color 0.3s; /** スムーズ変化 **/
}

.btn-border:hover { /** ホバー時 **/
  background: #ff6b6b; /** 背景色 **/
  color: #fff; /** 文字色反転 **/
}
  

7 完成イメージ

8 代用プラグイン

このフェードイン効果はJavaScriptとCSSだけで実装可能ですが、
プラグインで同様の機能を使う場合は、「AOS（Animate On Scroll）」 がおすすめです。
AOSはHTMLに data-aos="fade-up" のように書くだけで多彩なスクロールアニメーションが設定できます。

9 まとめ

スクロールに連動して上下左右から要素がふわっと表示されるだけで、サイト全体に動きが生まれます。
このコードは軽量・簡単・汎用性が高いため、バナー、ボタン、画像、見出しなどに幅広く使えます。
色や距離、速度を変更すれば、オリジナルのフェード演出として使い回し可能です。