【コピペOK】スクロールアニメーションの作成手順をやさしく解説！（ChatGPTのプロンプト付き）

「スクロールしたときに、画像や文字がふわっと出てくる」

そんな演出を見かけたことはありませんか？

これは「スクロールアニメーション」と呼ばれる演出で、ユーザーの視線を引きつけたり、情報の印象を強めたりする効果があります。

でも、JavaScriptを触ったことがないと「難しそう…」と感じてしまうかもしれません。

この記事では、初心者でも迷わず試せるように

HTML・CSS・JavaScriptの3ステップで作れるスクロールアニメーションの基本をやさしく解説していきます。

---

🎬 完成イメージ

• スクロールすると文字や画像が「ふわっ」と表示される
• どんな要素でも適用できる
• モバイルにも対応した軽量なアニメーション

---

📂 ファイル構成（実用的な分割型）

scroll-animation/
├─ index.html         ← HTML本体（構造）
├─ css/
│   └─ style.css      ← スタイル定義（初期状態・表示後）
└─ js/
    └─ script.js      ← Intersection Observerで発火処理

この構成であれば、実務にもそのまま流用しやすくなります。

次は、実際にアニメーションさせる要素をHTMLで用意していきましょう。
ここから手を動かして作っていく準備に入ります。

---

STEP1 HTML構造を用意しよう

「アニメーションって難しそう…」と思っていませんか？

実は、やることはとてもシンプルです。
動かしたい要素に特定のクラスをつけるだけで準備は完了します。

以下のように、表示させたい要素に .fade-in というクラスを追加してください。

<section class="content">
  <!-- アニメーション対象 -->
  <h2 class="fade-in">ふわっと出てくる見出し</h2>

  <!-- テキスト要素 -->
  <p class="fade-in">これはスクロールで出現するテキストです。</p>

  <!-- 画像要素 -->
  <img class="fade-in" src="example.jpg" alt="説明画像">
</section>

---

✅ 解説

• .fade-in クラスが付いている要素が、スクロール時に出現する対象になります。
• どんなタグ（見出し・段落・画像など）にも使えます。
• クラス名は自由に変えてもOKですが、後述するCSSやJSと一致させる必要があります。

---

このように、HTMLの段階で「アニメーション対象の要素に目印をつける」というのが第一ステップです。

次は、CSSでこの要素に「最初は見えない」「表示されるとふわっと出てくる」という効果をつけていきましょう。

---

STEP2 CSSで見た目を整えよう

HTMLに「アニメーションさせる要素」は配置できました。

ここでは、それらの要素を初期状態では非表示にして、表示時にアニメーションで出現させるスタイルをつけていきます。

以下のCSSを css/style.css に記述してください。

/* 初期状態：透明＆少し下にずらす */
.fade-in {
  opacity: 0;                     /* 見えない */
  transform: translateY(20px);    /* 下に20px移動 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* アニメーション */
}

/* 表示状態：元の位置に戻して表示 */
.fade-in.show {
  opacity: 1;                     /* 表示 */
  transform: translateY(0);       /* 元に戻す */
}

---

✅ 解説

• .fade-in は最初の状態です。ページ読み込み時は見えない＆下にあるように見せています。
• .show クラスがJSで付けられることで、「ふわっ」と表示されます。
• transition はアニメーションのなめらかさを調整しています。

---

CSSはこれだけです。

次はいよいよJavaScriptで、「画面内に入ったら .show クラスをつける」処理を実装していきましょう。

---

STEP3 Intersection Observerでアニメーションを発火しよう

「いつ .show クラスをつければいいの？」と思ったあなた。

ここでは、JavaScriptで要素が画面に現れたタイミングを検知して、アニメーションを発火させます。

そのために使うのが、モダンなブラウザAPIである Intersection Observer（交差判定） です。

---

以下のコードを js/script.js に記述してください。

🔓 もっと知りたい方へ！

🧰この続きは、特典：ChatGPTプロンプト付きの完全版をnoteで詳しく解説しています！

次回予告｜「もっと読む」ボタン＆無限スクロールの作り方

次回は、ブログや商品一覧ページでよく使われる

「もっと読むボタン」や「無限スクロール」を実装する方法を紹介します！

---

✨ 定期購読のご案内

noteメンバーシップでは、以下のような特典をご用意しています！

• コードの添削＆個別アドバイス
• 月1回のZoom相談
• 実務テンプレートの先行配布
• ChatGPTプロンプト共有

「もっと学びたい」「困ったときに相談したい」

そんな方は、ぜひご参加ください！

👉 あなたの「できた！」を、これからも一緒にサポートします。