Liveveryday BLOG

Liveverydayメンバーのライフハックブログ

テキストアニメーション

f:id:webtsuku1:20160209222920j:plain

 

こんばんは、フロントエンドエンジニアのあらぴくです。

 

f:id:webtsuku1:20160209223218j:plain

  (あらぴく)

 

今日はjQueryプラグイン、「textAnimation.js」についてご紹介したいと思います。

 

github.com

 

こちらのプラグインは、テキストにかけるエフェクトで、非常に簡単に実装できます。

ライセンスはMITです。

 

 

 サンプルコード

<p class="ef">Hello, World</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="jquery.textAnimation.js"></script>
<script type="text/javascript">
$('.ef').textAnimation();
</script>

 

たったこれだけです。簡単ですね。

 

オプションでスピード調整やフェードインのアングルなどを簡単に調整できますので、気になる人は是非調べてみてください。

 

では、また。

 

あらぴく