Letter Effects and Interaction Ideas

JavaScript

おもしろいレターエフェクトを実装できる「Letter Effects and Interaction Ideas」

Letter Effects and Interaction Ideasは、おもしろいレターエフェクトを実装することができます。全部で4種類のタイポグラフィアニメーションが用意されています。見出しに装飾をつけてユーザーを注目させたい人にはピッタリですね。

文字にホバーするとアニメーションする

デモ

真ん中に大きく表示された文字にホバーするとアニメーションします。ページの右下から、他のデモを選択することが可能です。全部で4つのデモを見ることができます。

ホバーすることで文字の形や背景やカラーが変わったり、手書きのように文字が描かれたり、クルッと縦に1回転したりと、いろんなアニメーションによるレターエフェクトを見ることができます。

どのエフェクトもかなり凝っていて、思わずグッと注目してしまいますね。ユーザーの注目を引きたい、またはユーザーを少しでも楽しませたいという人にはピッタリの機能といえるのではないでしょうか?

いくつかのアニメーションにはanime.jsが使われているほか、レター構造にはCharming.jsが用いられています。また、デモにはCSS GridやCSS Variablesを使用しているとのこと。

というわけで、おもしろいレターエフェクトを実装できる「Letter Effects and Interaction Ideas」のご紹介でした。

Letter Effects and Interaction Ideas

circleChart多彩なカスタマイズができる円形チャート「circleChart」前のページ

いろんなズーム機能を実装できるjQueryプラグイン「xZoom」次のページno-image

関連記事

  1. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  2. qpScroll
  3. parallax-background.js
  4. no-image
  5. Grasp Mobile Progress Circle

最近の記事

  1. 岩木山
  2. パーソナルパーティション

アーカイブ

PAGE TOP