スクロールアニメーション デザイン見本
Intersection Observer APIを使い、スクロールで要素が画面内に入ったときにアニメーションを発動させる実装パターンを紹介します。CSS・JSのコピペ用コードを掲載しています。
① 基本 — 下からフワッと表示（フェードイン）
↓ 下にスクロールしてみて
スクロールで表示されます ①
スクロールで表示されます ②
スクロールで表示されます ③
HTML
<div class="scroll-target">スクロールで表示されます ①</div>
<div class="scroll-target">スクロールで表示されます ②</div>
<div class="scroll-target">スクロールで表示されます ③</div>CSS
.scroll-target {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-target.is-visible {
opacity: 1;
transform: translate(0, 0);
}JS
(function () {
var targets = document.querySelectorAll('.scroll-target');
var obs = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.className = entry.target.className + ' is-visible';
obs.unobserve(entry.target);
});
}, { threshold: 0.3 });
targets.forEach(function (el) { obs.observe(el); });
})();
IntersectionObserver の基本構造
IntersectionObserver は「要素が画面と何%交差したか」を監視するAPIです。threshold: 0.3 で要素が30%見えたときにコールバックが発火します。isIntersecting が true のときだけクラスを付与し、unobserve() で監視を止めることで「一度だけアニメーション」を実現できます。
② 表示方向の切り替え（上 / 下 / 左 / 右）
↓ 下にスクロールしてみて
スクロールで表示されます
HTML
<div class="scroll-target">スクロールで表示されます</div>CSS
.scroll-target {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-target.is-visible {
opacity: 1;
transform: translate(0, 0);
}JS
(function () {
var targets = document.querySelectorAll('.scroll-target');
var obs = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.className = entry.target.className + ' is-visible';
obs.unobserve(entry.target);
});
}, { threshold: 0.3 });
targets.forEach(function (el) { obs.observe(el); });
})();
translateY / translateX で方向を指定する
初期状態の transform を変えるだけで表示方向を切り替えられます。上からなら translateY(-40px)、左からなら translateX(-40px) と負の値にします。.is-visible クラス付与時は transform: translate(0, 0) に戻すため、どの方向でも1つの共通クラスで対応できます。
③ 複数要素の順次表示（Stagger）
↓ 下にスクロールしてみて
Card 01
Card 02
Card 03
Card 04
Card 05
Card 06
Card 07
Card 08
Card 09
HTML
<div class="stagger-grid">
<div class="stagger-item">Card 01</div>
<div class="stagger-item">Card 02</div>
<div class="stagger-item">Card 03</div>
<div class="stagger-item">Card 04</div>
<div class="stagger-item">Card 05</div>
<div class="stagger-item">Card 06</div>
</div>CSS
.stagger-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.stagger-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.4s ease, transform 0.4s ease;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.stagger-item.is-visible {
opacity: 1;
transform: translate(0, 0);
}
.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.2s; }
.stagger-item:nth-child(4) { transition-delay: 0.3s; }
.stagger-item:nth-child(5) { transition-delay: 0.4s; }
.stagger-item:nth-child(6) { transition-delay: 0.5s; }JS
(function () {
var items = document.querySelectorAll('.stagger-item');
var obs = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.className = entry.target.className + ' is-visible';
obs.unobserve(entry.target);
});
}, { threshold: 0.2 });
items.forEach(function (el) { obs.observe(el); });
})();
transition-delay で要素ごとに遅延させる（Stagger）
複数の要素を順番に表示させるStagger効果は、CSSの transition-delay を :nth-child セレクタで指定するだけで実現できます。JSは全要素を同時に監視・表示するだけで、遅延の制御はすべてCSSが担います。グリッドレイアウトとの組み合わせで、カードが1枚ずつ登場するような演出が手軽に作れます。
注意点：Intersection Observer APIは主要なモダンブラウザで広くサポートされていますが、Internet Explorer 11では動作しません。IE対応が必要な場合は polyfill を導入するか、スクロールイベントで代替してください。また、デモ内のスクロールエリアでは
root オプションでコンテナを指定していますが、実際のページ実装ではデフォルト（ビューポート基準）のままお使いください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
HTML / CSS / JAVASCRIPT · 随時更新中 WebデザインとUI実装例集 Webサイトやアプリで使われるUIコンポーネント・デザインパターンをまとめました。それぞれのカ…