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. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  2. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  3. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  4. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  5. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

  6. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP