🎬【jQuery×CSS】紙芝居風パララックスアニメーションの作り方【CodePenデモ付き】

「スクロールに合わせて1枚1枚のセクションが現れる」
まるで紙芝居のような演出を、CSSとjQueryを使って実装してみましょう！
視覚的なインパクトがあり、企業サイトやポートフォリオにもぴったりなエフェクトです✨

今回は、Stickyfillを使って全デバイス対応しつつ、CodePenでデモ確認も可能な形でご紹介します。

📌 完成イメージ（CodePenデモ）

👉 CodePenで動作確認できます：※実際のサイトで確認した方がわかりやすいです！
🔗 デモを見る

See the Pen Untitled by ひさ (@npupiwfh-the-sans) on CodePen.

✅ 実装のポイント

• 各セクションに position: sticky を使って順番に止まる
• 背景画像をパララックス風に切り替えながら見せる
• スマホ・タブレットも同じ挙動にするため Stickyfill を利用

🧱 HTML構造

<header id="header">
  <h1>Parallax Story</h1>
</header>

<main id="container">
  <section class="parallax-slide">
    <h2>Scene 1</h2>
    <p>最初のシーンです。</p>
  </section>

  <section class="parallax-slide bg-image-1">
    <h2>Scene 2</h2>
    <p>背景付きのシーンです。</p>
  </section>

  <section class="parallax-slide">
    <h2>Scene 3</h2>
    <p>テキスト多めのセクション</p>
    <p>段落が複数あると動きが滑らかになります。</p>
  </section>

  <section class="parallax-slide bg-image-2">
    <h2>Scene 4</h2>
    <p>背景画像が切り替わります。</p>
  </section>

  <section class="parallax-slide">
    <h2>Scene 5</h2>
    <p>ラストシーンです。</p>
  </section>
</main>

<footer id="footer">
  <small>&copy; 2025 ParallaxStory</small>
</footer>

🎨 CSSスタイル

/* ヘッダーとフッター */
#header {
  position: fixed;
  top: 0;
  height: 70px;
  background: #333;
  color: #fff;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer {
  position: relative;
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  z-index: 10;
}

/* 全体レイアウト */
#container {
  margin-top: 70px;
  position: relative;
  z-index: 1;
}

/* 各スライド共通 */
.parallax-slide {
  position: sticky;
  top: 70px;
  min-height: 100vh;
  background: #fff;
  padding: 100px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 背景画像を持つセクション */
.bg-image-1 {
  background: url('https://picsum.photos/id/1011/800/600') no-repeat center;
  background-size: cover;
  color: #fff;
}

.bg-image-2 {
  background: url('https://picsum.photos/id/1025/800/600') no-repeat center;
  background-size: cover;
  color: #fff;
}

⚙️ JavaScript（jQuery + Stickyfill）

$(function () {
  const $slides = $('.parallax-slide');
  Stickyfill.add($slides); // すべてのデバイスでStickyを有効化
});

💡 Stickyfillとは？

一部のブラウザやスマホでは position: sticky; が安定して動かないことがあります。
そこで「Stickyfill」を使うことで、クロスブラウザで安定した動作を実現できます！

👉 Stickyfill GitHub
（ライブラリはCDNでも読み込み可能）

👇 まとめ

✅ 紙芝居風にセクションが切り替わるデザインはインパクト抜群！
✅ Stickyfill を使えばスマホでも同じ演出が可能！
✅ CodePenでデモを見ながらカスタマイズも簡単！

📨 ご意見・リクエストはXへ！

「こんな記事あったら嬉しい！」
「ここが分かりにくかった！」など
気軽に X（旧Twitter）のDM でご連絡ください📩

📱 フォローも大歓迎です！
あなたの声をもとに、初心者にもわかりやすい記事を今後も発信していきます🙌