CSSの可能性は無限大!ウゴウゴルーガみたいに文字をジジジと波打つように震わせる -Squigglevision

若い人は知らないかも、、、昔ウゴウゴルーガで見たような、文字をジジジと波打つように震わせるアニメーションを実装するCSS+SVGを紹介します。

この動きの名称は何かなと思って調べてみたら、「Squigglevision」だそうです。特許取得済みのコンピューターアニメーションの方法で、画像のエッジを波打つことにより画像をアニメーション化だそうです。

文字をジリジリと小刻みに震わせるアニメーション


この楽しいアニメーションの実際の動きは、下記ページで楽します。
文字を日本語にしたり、フォントのサイズ・カラーも変更できます。

See the Pen
Squiggly Text
by Lucas Bebber (@lbebber)
on CodePen.

文字のエッジだけでなく、ラインにも適用しても面白い効果が得られます。
下記はスライダーの枠に震わせるアニメーションが適用されています。このページの枠だと小さいから、デモページで見る方がよいです。

See the Pen
Ghibli Slider
by Adam Kuhn (@cobra_winfrey)
on CodePen.

このアニメーションの実装方法は、下記ページが参考になります。

サイトのキャプチャ

Squigglevision

サイトのキャプチャ

sponsors

top of page

©2024 coliss