スクロールで要素を出す
Intersection Observer
画面に入ってきたときだけ、要素をふわっと出す。紹介ページでいちばん見かける動き。
AIへの頼み方
カードが画面に入ったときだけ、ふわっと下から出てくるようにしてください。Intersection Observer で監視して、一度出したら監視をやめる形にしてください。prefers-reduced-motion: reduce の環境では動かさず、最初から表示された状態にしてください。
動くデモ
右下のボタンで再生と停止を切り替えられます。動きを減らす設定の端末では停止した状態で始まります。
全画面で見る ↗最小コード
<div class="reveal">画面に入ったら出てくる要素</div>
<style>
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none; opacity: 1; transform: none; }
}
</style>
<script>
const io = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
entry.target.classList.add('is-in');
io.unobserve(entry.target); // 一度出したら監視をやめる
}
}, { threshold: 0.25 });
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
</script>対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2019-03-25 / widely 2021-09-25）。この辞典のデモ遅延実行にも使っている。
実案件でそのまま使える。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
長いページで、下のほうの内容が「読まれる直前に現れる」ようにしたいときに向く。全体が一度に見えていると単調になりがちな、縦に長い紹介ページや事例一覧で効く。
読み込み時に全部を動かす必要はない。一度出したら監視をやめるのがこの機能の使いどころで、そうすれば上下にスクロールするたびに何度も出たり消えたりしない。
避けたいのは3つ。
ひとつは本文に使うこと。読み進める文章が一段落ずつ遅れて出てくると、読む速度に追いつかない。動かすのは見出し・カード・画像までにとどめる。
ふたつめは動きを大きくしすぎること。下から18ピクセルくらい持ち上げるだけで十分に「出てきた」と伝わる。100ピクセル動かすと、画面が揺れているように感じる人がいる。
みっつめは最初の画面で使うこと。ページを開いた瞬間に見えている範囲が透明から始まると、読み込みが遅れたように見える。最初の一画面は静かに出しておく。
動きを減らす設定をしている人には、透明のまま止まってしまわないよう気をつける。表示だけして動きを消すのが正しい落とし所になる。