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. no-image
  2. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  3. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  4. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  5. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  6. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP