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

Post on:2019年9月6日

sponsors

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

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

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

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

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

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