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

関連記事

  1. Simple Image Panner and Zoomer
  2. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  3. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  4. Responsive Elements
  5. Jquery modal box plugin
  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP