マトリックス感のあるエフェクトをテキストに与える「Text Effects」

「Text Effects」はテキストに近未来感のあるエフェクトを与え、アニメーションさせることができるjQueryプラグインです。

Text Effects

Text-Effects

これは面白いですね。指定したテキスト(文字列)をエフェクトを伴って徐々に表示させていきます。

Text-Effects-demo-1

 

Text-Effects-demo-2

 

Text-Effects-demo-3

 

近未来的なアニメーションでとてもかっこいいです。マトリックスを彷彿させるDemoです。

 

それでは「Text Effects」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="texteffects.min.js"></script>

 

HTMLはこのようにマークアップします。

<p class="text-effect">
  Digital Design Does Matter in Fourdesire
</p>

 

JavaScriptはこのように実装します。

$(".text-effect").textEffect();

 

するとこのように作ることが出来ました。

Text-Effects-sample-1

Text-Effects-sample-2

 

いまいちな例ですいません。動作テストをしたブラウザはChrome, Firefox, Safariで、MITライセンスです。この効果はイケてます。参考にどうぞ。

 

Home > JavaScript > マトリックス感のあるエフェクトをテキストに与える「Text Effects」

Return to page top