スクロールで要素をふわっと表示する方法です。
ページをスクロールすると、画像やテキストがふわっと現れる演出はユーザー体験を向上させます。CSSだけでは実現が難しいため、JavaScriptやライブラリ（AOSなど）と組み合わせて使うのが一般的です。
基本例（AOSライブラリを使用）
|
1 2 3 4 5 6 7 8 9 10 11 |
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script> AOS.init(); </script> <div data-aos="fade-up"> フェードインするコンテンツ </div> |
補足
- フェードイン・ズーム・スライドなど多彩な効果が可能
- AOSの他にもScrollReveal.jsなどの選択肢あり
