こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
近年のWebサイトでは「動きのあるインタラクション」を取り入れることが当たり前になってきました。
特に、スクロールに連動するアニメーション はユーザー体験を大きく向上させる効果があります。
その中でも、ちょっと遊び心のある「ぐにゃっ」と変形して登場するエフェクトは、シンプルなフェードインやスライドインよりもユニークで、印象に残る演出です。
例えば、ブランドサイトや採用ページ、イベント紹介ページなど、ストーリー性を持たせたいコンテンツで使うと非常に効果的。
この記事では「スクロールすると要素がぐにゃっと変形して現れる」表現の作り方を、基本から応用まで解説していきます。
基本の仕組み
ぐにゃっとした登場感を演出するには、CSSの transform: scale() や skew()、border-radius を組み合わせ、柔らかい動きを与えます。
さらに、Intersection Observer API を使うことで「スクロールして画面に入ったら発火」という自然な演出が可能になります。
シンプルな実装例
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
スクロールしてボックスが画面に入った瞬間、小さく歪んだ形から本来の形にぐにゃっと変形しながら登場します。
応用例：複数要素をずらして登場
複数の要素をリスト形式で配置し、ずらしながらぐにゃっと登場させると、リズム感が出ます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この応用版では、それぞれの要素がタイミングをずらして柔らかく変形しながら現れます。
まとめ
スクロールに応じて「ぐにゃっ」と変形して現れるUIは、ちょっとした工夫でサイトに個性を与えることができます。
シンプルな登場エフェクトから、複数要素のリズミカルな演出まで応用が利くので、ブランドの世界観やサイトの雰囲気に合わせて使うのがおすすめです。
ユーザーに「おっ！」と思わせるインタラクションを取り入れて、記憶に残るWeb体験を演出してみてください。
satokotadesignキャンペーン実施中！
