こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを訪れるユーザーを惹きつける仕掛けのひとつに「スクロールに応じた動き」があります。
とくにテキストアニメーションは効果的で、通常の文字をただ配置するだけでなく、動きによって印象的な演出を与えることができます。
今回紹介するのは「スクロールすると文字がバラバラに崩れ、また再構築される」エフェクトです。
ユーザーが下に進むにつれてテキストが崩れ落ちていき、再び組み上がる。
まるで映画のオープニングのような演出で、イベントページやブランドサイト、ポートフォリオなどに最適です。
このエフェクトは CSSのtransform・opacity と、スクロール制御のための JavaScript（Intersection ObserverやScrollイベント） を組み合わせることで実現できます。
JavaScriptでスクロール位置を監視し、特定の要素がビューポートに入ったときに文字をバラバラにする → 再構築する、という流れです。
スクロールで崩れる文字の基本コード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ポイント
1文字ずつ分割して制御することで、崩れる方向や角度をランダム化でき、自然で迫力あるアニメーションが表現できます。
応用例：複数行テキストに対応
上記の方法を使えば、見出しや段落など複数行のテキストにも応用できます。
- 1文字ごとに異なる速度で戻す
- ランダムな透明度で消える演出を追加
- スクロールを戻したときも再アニメーションさせる
まとめ
「スクロールで文字がバラバラに崩れて再構築される」エフェクトは、ユーザーの目を引きつけ、強烈なインパクトを与えることができます。
しかもCSSとJavaScriptの組み合わせだけで比較的シンプルに実装できるため、学習用にもおすすめです。
イベント告知やブランディングサイト、ポートフォリオなどに活用してみてください。
satokotadesignキャンペーン実施中！
