2019年09月6日(金)

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

• 0
• 134
• 73
• 90

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

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

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

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

このアニメーションの実装方法は、下記ページが...