Webサイトでよく見る
「スクロールするとふわっと表示されるアニメーション」。
ポートフォリオやコーポレートサイトでよく使われる定番表現です。
今回は コピペOK で使える
スクロールフェードインの実装方法を解説します。
フェードイン系アニメーションのバリエーションはこちら↓
【コピペOK】スクロール時にフェードインするアニメーションの実装方法（CSS＋JS)
See the Pen 要素が見えたらフェードイン（CSSのみ） by Satomi (@satomi79000033) on CodePen.
目次（もくじ）
解説
opacity
最初は透明にしておきます。
translateY
下にずらしておくことで「下からふわっと」感を出します。
IntersectionObserver
要素が画面内に入った瞬間にクラスを付与します。
スクロールイベントよりも軽量で、現在の主流実装です。
アニメーションをおしゃれにするコツ
transition: all 1.2s ease; にするとゆったり
transform: translateY(80px); でよりドラマチックに
表示速度が遅いと台無しになる
スクロールアニメーションは表示速度が遅いとカクつきます。
関連記事
【一文字ずつ】テキストアニメーション（javascript/css）コピペＯＫ
【CSSのみ】フェードインアニメーションのバリエーションまとめ
