Webサイトをスクロールする「楽しさ」を引き出してみませんか？
この記事では、JavaScriptを一切使わず、最新のCSSだけで「スクロールに連動して動く」テキストアニメーションを5つ紹介します。 画面に入ってくるスクロール量に合わせて文字が出現し、表示中も静かにアニメーションし続けるモダンな構成です。SWELLにコピペするだけで、シンプルかつインタラクティブな表現を実装できます。
Scroll Fade & Float（スクロール・フェード＆フロート）
画面にスクロールして入ってくる動きに合わせて、下からふわりとフェードインします。完全に表示された後は、水に浮かぶようにゆっくりと上下に浮遊し続けます。ホバーでピタッと止まり、影が落ちます。
See the Pen Scroll Fade & Float by BaseKENT (@basekent) on CodePen.
調整方法
- 出現のタイミング:
animation-range: entry 10% cover 30%をcover 50%などに変更すると、画面のより中央に到達するまでゆっくりと出現し続けます。 - 移動距離:
@keyframes scrollFadeInのtranslateY(50px)を大きくすると、より下の方から移動してきます。
Scroll Slide & Breathe（スクロール・スライド＆ブリーズ）
スクロールに合わせて、画面の横から滑るようにスライドインしてきます。表示中は文字がゆっくりと呼吸するように拡大縮小し、ホバーすると文字間隔がスッと広がって開放感を与えます。
See the Pen Scroll Slide & Breathe by BaseKENT (@basekent) on CodePen.
調整方法
- スライドの方向:
translateX(-100px)をtranslateX(100px)に変更すると、右側から左へスライドインする動きになります。 - ホバー時の広がり:
letter-spacing: 0.2emの数値を調整して文字間隔の変化量を決めます。
Scroll Unblur & Shine（スクロール・アンブラー＆シャイン）
強いぼかし（ブラー）がかかった状態から、スクロールに合わせてピントが合っていきます。待機中は黒文字の上にうっすらと光沢が走り続け、ホバーで文字が明るく発光します。
See the Pen Scroll Unblur & Shine by BaseKENT (@basekent) on CodePen.
調整方法
- ブラーの強さ:
@keyframes scrollUnblurのblur(20px)を大きくすると、より深くぼやけた状態から出現します。 - 光沢の速度:
@keyframes shineIdleを呼び出している3sの秒数を変更して調整します。
Scroll 3D Flip & Sway（スクロール・3Dフリップ＆スウェイ）
看板がパタンと倒れてくるように、スクロールに合わせてX軸（縦方向）に回転しながら現れます。表示中は3D空間で静かにゆらゆらと揺れ続け、ホバーで真っ直ぐに直立します。
See the Pen Scroll 3D Flip & Sway by BaseKENT (@basekent) on CodePen.
調整方法
- 倒れ込む方向:
rotateX(-90deg)をrotateX(90deg)にすると、奥から手前へではなく、手前から奥へ起き上がるような動きに変わります。 - 揺れの大きさ:
@keyframes sway3DIdleの角度（5deg）を調整します。
Scroll Parallax & Noise（スクロール・パララックス＆ノイズ）
スクロールする速度と「文字が上に移動する速度」に意図的なズレを生じさせることで、視差効果（パララックス）を作り出します。待機中は微細なデジタルノイズが走り、ホバーでノイズが消えて少し斜体に歪みます。
See the Pen Scroll Parallax & Noise by BaseKENT (@basekent) on CodePen.
調整方法
- パララックスの強さ:
@keyframes scrollParallaxの50pxと-50pxを大きくすると、画面をスクロールした時の文字のズレ（視差）がより顕著になります。 - ノイズの頻度:
@keyframes noiseIdleの設定で、特定のパーセンテージでのみ切り取り（clip-path）を発生させ、デジタルなグリッチ感を出しています。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
