スクロール連動アニメーションの基本！初心者でもわかるCSSとJSの実装ガイド

スクロール連動アニメーションの基本的な考え方（JS補足あり）

先生と生徒の会話形式で理解しよう

生徒

「画面を下にスクロールしたときに、ふわっと画像が出てくるサイトってどうやって作るんですか？」

先生

「それはスクロール連動アニメーションという技術です。画面の中に特定の要素が入ってきたことを検知して動かしているんですよ。」

生徒

「難しそうですが、初心者の私でもできますか？」

先生

「基本的な考え方は、旗振り当番のようなものです。準備の仕方からゆっくり解説しますね！」

1. スクロール連動アニメーションとはどのようなものか

スクロール連動アニメーションとは、ウェブサイトを閲覧している人が画面を上下に動かしたときに、その動きに合わせて画像や文章がアニメーションを開始する仕組みのことです。通常のアニメーションはページを開いた瞬間に始まってしまいますが、これを使うと「その場所までたどり着いたとき」にだけ動きを見せることができます。

例えば、長い縦長のページを読んでいるときに、ずっと下のほうにある画像が、ページを開いた瞬間に勝手に動き終わっていたら勿体ないですよね。読んでいる人の視線がその場所に届いた瞬間に動かすことで、飽きさせない演出が可能になります。これを専門用語でスクロールトリガーと呼ぶこともあります。トリガーとは「引き金」という意味で、スクロールが動きのきっかけになることを指します。

最近のオシャレな企業サイトや採用サイトでは、この技術が必ずと言っていいほど使われています。プログラミング未経験の方でも、仕組みさえ理解してしまえば、それほど高い壁ではありません。まずは、動きのきっかけをどうやって作るのかという土台から学んでいきましょう。

2. 画面内に入ったことを判断する監視員の役割

スクロール連動アニメーションを実現するためには、画面の中に特定の要素が入ってきたかどうかをずっと見張っている「監視員」が必要です。この監視員の役割を果たすのが、JavaScriptというプログラミング言語の「インターセクションオブザーバー」という機能です。少し名前は長いですが、日本語で言えば「交差監視」という意味になります。

イメージとしては、校門の前に立っている先生のようなものです。生徒（画像や文字）が校門（画面の表示エリア）を通過した瞬間に、「はい、今通ったから動き始めていいよ！」と合図を送ります。この合図があって初めて、アニメーションが実行される仕組みになっています。

この監視員は非常に優秀で、パソコンの動作を重くすることなく、静かに見守ってくれます。昔のプログラミング手法では、スクロールするたびに計算を行っていたためパソコンが大変でしたが、今の技術を使えば初心者でもスマートに、かつ軽い動作でアニメーションを実装できるのです。

3. 動きをつける準備としてクラスという名札を使う

アニメーションを動かす具体的な手順として、まずは要素に「名札」をつける作業をします。これを「クラス名」と呼びます。例えば、まだ動いていない状態の要素には「まだ動かないで」という印をつけておき、画面に入ってきた瞬間に「動いていいよ」という新しい名札に貼り替えます。

具体的には、CSSというデザインを指定する言葉を使って、「active（アクティブ）」という名前のクラスがついたときだけアニメーションが実行されるように設定しておきます。JavaScriptという監視員は、画面内に入った要素を見つけたら、その要素に「active」という名札をペタッと貼るだけの仕事をします。

名札が貼られた瞬間に、あらかじめ用意しておいたCSSのアニメーションが発動します。このように、JavaScriptで「きっかけ」を作り、CSSで「実際の動き」を担当するという分業体制を整えるのが、最も一般的で簡単な作り方です。


<style>
	.scroll-target {
	    opacity: 0;
	    transform: translateY(30px);
	    transition: opacity 1s, transform 1s;
	    padding: 20px;
	    background-color: #f8f9fa;
	    border: 1px solid #dee2e6;
	    margin: 50px 0;
	}

	/* 名札が貼られたときの状態 */
	.scroll-target.active {
	    opacity: 1;
	    transform: translateY(0);
	}
</style>

<div class="scroll-target active">
	<p>この要素は、activeという名札がつくとふわっと浮き上がります。</p>
</div>

ブラウザ表示

4. 監視員を動かすJavaScriptの書き方

さて、ここからは少しだけプログラミングらしい記述が出てきます。監視員であるインターセクションオブザーバーを呼び出すコードです。といっても、最初は意味を完璧に理解する必要はありません。おまじないのようなものだと思ってください。このコードは「対象のものが画面に少しでも見えたら、activeというクラスを足してね」という指示を出しています。

この仕組みを使うことで、一つ一つの画像に対して個別に指示を出さなくても、同じクラス名をつけておくだけで、監視員が次々と順番に見つけて処理してくれます。プログラミングの便利なところは、一度ルールを決めてしまえば、あとはコンピューターが自動で働いてくれる点にあります。

下記のコードでは、画面の下から現れた瞬間に反応するように設定しています。これを少し改造するだけで、画面の真ん中まで来たら反応させるといった細かい調整もできるようになります。まずは基本の形をコピーして動かしてみることが、最初の一歩になります。


<style>
	.box {
	    width: 100%;
	    height: 100px;
	    background-color: #0d6efd;
	    color: white;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    opacity: 0;
	    transform: scale(0.8);
	    transition: all 0.8s ease-out;
	    margin-bottom: 20px;
	}

	.box.show {
	    opacity: 1;
	    transform: scale(1);
	}
</style>

<div class="box js-scroll">スクロールで見えてくると大きくなります</div>
<div class="box js-scroll">次々に反応します</div>

<script>
	const targets = document.querySelectorAll(".js-scroll");
	const observer = new IntersectionObserver((entries) => {
	    entries.forEach(entry => {
	        if (entry.isIntersecting) {
	            entry.target.classList.add("show");
	        }
	    });
	});

	targets.forEach(target => {
	    observer.observe(target);
	});
</script>

ブラウザ表示

5. 横からスライドしてくるアニメーションの実装

次は応用編として、要素が横からシュッとスライドしてくる動きを作ってみましょう。これも基本は同じです。最初の状態で、画面の外（左側や右側）にわざと追い出しておき、監視員が合図を出した瞬間に元の位置に戻るように指定します。これだけで、非常に動きのあるダイナミックなサイトになります。

「transform（トランスフォーム）」という命令の中で「translateX（トランスレート・エックス）」という言葉を使うと、横方向の移動距離を決めることができます。マイナスの数字を入れれば左側に、プラスの数字を入れれば右側に移動します。最初は見えないように隠しておき、表示された瞬間にその数字を0に戻してあげれば、まるでどこからか飛んできたような演出になります。

このとき、「transition（トランジション）」という命令で、何秒かけて移動するかを指定するのを忘れないようにしましょう。これがないと、アニメーションにならずに一瞬で移動してしまいます。1秒くらいかけてゆっくり動かすのが、もっとも美しく見える目安です。


<style>
	.slide-left {
	    opacity: 0;
	    transform: translateX(-100px);
	    transition: all 1s;
	}

	.slide-left.active {
	    opacity: 1;
	    transform: translateX(0);
	}
</style>

<div class="slide-left active">
	<img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-thumbnail">
	<p>左から右へ滑り込むような動きです。</p>
</div>

ブラウザ表示

6. 複数要素を順番に時間差で表示させるコツ

三つの画像が並んでいるときに、バラバラと一斉に動くのではなく、左から右へ「トントントン」とリズム良く現れる演出はとても心地よいものです。これを実現するには、CSSの「transition-delay（トランジション・ディレイ）」という機能を使います。これは「命令が出てから実際に動き出すまでの待ち時間」を決めるものです。

一つ目の画像は待ち時間なし、二つ目は0.2秒待つ、三つ目は0.4秒待つ、というふうに少しずつズラして設定します。監視員からの合図（activeクラスの付与）は同時であっても、それぞれの画像が自分の番を待ってから動き出すため、流れるような連鎖反応が生まれます。

このテクニックをマスターすると、サイト全体のクオリティが一気にプロレベルに引き上がります。ユーザーの視線も自然と動きに沿って誘導されるため、重要な情報を順番に見せたいときに非常に強力な武器となります。数字を少し変えるだけで雰囲気が変わるので、いろいろ試してみるのが楽しい工程です。


<style>
	.stagger-item {
	    opacity: 0;
	    transform: translateY(20px);
	    transition: all 0.5s;
	    display: inline-block;
	    margin: 10px;
	}

	.stagger-item.active {
	    opacity: 1;
	    transform: translateY(0);
	}

	/* 待ち時間を個別に変える */
	.item1 { transition-delay: 0.2s; }
	.item2 { transition-delay: 0.4s; }
	.item3 { transition-delay: 0.6s; }
</style>

<div class="text-center">
	<div class="stagger-item item1 active">カード1</div>
	<div class="stagger-item item2 active">カード2</div>
	<div class="stagger-item item3 active">カード3</div>
</div>

ブラウザ表示

7. 一度だけ動かすのか何度も動かすのかの設定

スクロールアニメーションを実装する際に悩むのが、「一度下にスクロールして表示されたあと、また上に戻って再度スクロールしたときに、もう一度動かすべきか？」という点です。これはサイトの目的によって使い分けます。

もし一度だけ動かせば十分という場合は、監視員が合図を出したあとに監視を辞めるようにコードを書きます。逆に、何度でも動かしたい場合は、画面から消えたときに一度「名札（クラス）」を剥がすような命令を加えます。そうすることで、再度画面に入ってきたときにまた新しく名札が貼られ、アニメーションが再始動します。

初心者のうちは、まずは「一度だけ動く」設定から始めるのが簡単でおすすめです。あまり何度も画面がチカチカ動くと、読んでいる人が疲れてしまうこともあるからです。シンプルイズベストの精神で、まずは確実に動くものを作ってみましょう。

8. 背景色がスクロールで変わる演出の考え方

画像や文字だけでなく、背景の色がスクロールに応じて変化するサイトも素敵ですよね。これも基本の考え方は同じです。特定のセクション（区切り）が画面内に入ってきたら、ページ全体の背景色を塗り替える命令を出します。

背景色が変わることで、サイトのテーマが切り替わったことを視覚的に伝えることができます。例えば、最初は明るい白系の背景で清潔感を出し、実績紹介のセクションに来たら重厚感のある黒系の背景に変えるといった演出です。これもJavaScriptの監視員が、「今、実績のセクションに到着しました！」と知らせてくれるおかげで実現できるのです。

色を変えるときは、一瞬でパチッと変えるのではなく、「transition」を使って1秒から2秒くらいかけてじわっと変えるのがコツです。そうすることで、目に優しく高級感のある色の変化を楽しむことができます。

9. 実装する際の注意点とスマホでの動作確認

最後に、スクロールアニメーションを自作するときの注意点をお伝えします。一番大切なのは「やりすぎないこと」です。すべての文字にアニメーションをつけてしまうと、スクロールするたびに画面中が動き回り、肝心の文章が読みづらくなってしまいます。アクセントとして、大事なところに絞って使うのがプロの技です。

また、パソコンでは綺麗に動いていても、スマートフォンで見ると動きがカクカクしたり、意図しない場所で動き出したりすることがあります。指でスクロールするスマホは、マウスで操作するパソコンよりも動きが速くなりがちです。そのため、スマホでも実際に触ってみて、心地よいタイミングで動いているかを確認することが非常に重要です。

プログラミング未経験の方は、まず自分の手元のスマホで自分の作ったサイトが動く感動を味わってみてください。それが一番の上達への近道になります。もし動かなくても、英単語のスペルを一文字間違えているだけ、ということがほとんどです。焦らずゆっくり見直してみましょう。

2026年最新スキルアップ・実践セミナー