Webページ
スクロールして画面に入ったときに、ふわっと現れる。
AIへの指示例上の調整が入ります
Webページを作るAIに（ふだんの言葉で）Webページの各まとまりは、スクロールして画面に入ったときに少し下から上がりながらフェードインするようにしてください。長さは0.6秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。1度出たら、上に戻っても消さないでください。
細かく伝えるとき（制作の依頼や、HTML を書くAIに）ページのカードを、画面に入ったときに0.6秒で下から24px上がりながらフェードインさせてください。速さの変わり方はイーズアウト（ease-out）。IntersectionObserver で画面に入ったことを見て、1回だけ動かします。
細かい指定動画を作る人・細かく指示したい人向け
- 長さ
- 0.6秒
- 速さの変わり方
- イーズアウト（ease-out）
- 曲線の数値
- cubic-bezier(0, 0, 0.58, 1)
- きっかけ
- スクロールして画面に入ったとき（1回だけ）
- 変えるもの
- 下から 24px・透明度 0% → 100%
HTML・CSS・JavaScriptWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<section class="fb-reveal">画面に入ると現れます</section>
<script>
// 画面に入ったら is-visible を付ける（1回だけ）
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
});
}, { threshold: 0.2 });
document.querySelectorAll('.fb-reveal').forEach((el) => observer.observe(el));
</script>
<style>
/* JavaScript が動くときだけ隠す（動かない環境でも、中身は見えたままにする） */
@media (scripting: enabled) {
.fb-reveal {
opacity: 0;
transform: translateY(24px); /* 始めは下で透明 */
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fb-reveal.is-visible { opacity: 1; transform: none; }
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-reveal { animation: none; transition: none; }
}
</style>
- どう動くか
- ページを下へ読み進めて、まとまりが画面に入ったときにフェードインします。読む順番に合わせて、内容が出てきます。
- 使う場面
- 紹介ページの各まとまり、実績の数字、写真の一覧。
- やりすぎに注意
- 全部のまとまりに付けると、スクロールのたびに待たされます。1度出たものは、上に戻っても消さないでください。
