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. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. socialShare.js
  3. CSS3 Menu Slider
  4. jQuery Flip-Quote
  5. Sticky Slider Navigation(Responsive)
  6. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP