AMG Solution

jQueryライブラリを使用して、テキストにアニメーション効果を簡単に実装する方法

こんにちは、樋口です。
 
今回は、テキストにFlashの様なアニメーション効果をつけることができるライブラリ、jQuery TextFXについてご紹介します。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
jQuery TextFX
1.0.1
BootStrap
3.2.0

ライブラリの入手

jQuery TextFXは下記サイトよりダウンロードできます。
jQuery TextFXダウンロード(GitHub)
 
ファイルダウンロード後、ZIPファイルの中身の下記ファイルを任意の場所へ解凍します。
– jquery.transit.js
– jquery.textFx.js
 
これで準備は完了です。

HTMLファイル

初めに、HTMLファイルを作成します。
 
– index.html

40行目:
jQuery TextFXでアニメーションをつける、文字要素を記載しています。次項のjavaScriptで、「class=”test”」に対して処理を有効にしていきます。
 
49~50行目:
jQuery TextFXで使用するjavaScriptを読み込みます。
   
以上で、HTMLは完成です。次に、アニメーションをONにするための、javaScriptについて説明します。

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。
  
初めに、下記に主なパラメーター設定を記載します。

パラメータ 内容
type アニメーションの種類を設定(fadeIn、slideIn、rotate)
iChar アニメーションを有効にする文字数を設定
iAnim アニメーションの実行速度を設定
direction スライドインの開始方向を設定

実行結果

 
test.js(フェイドイン)


 
test.js(スライドイン)


 
test.js(一文字表示)

最後に

今回紹介したライブラリを使用すれば、文字列へのアニメーションが簡単に設定できます。使用手順も簡単なため、ぜひお試しください。
 
今後もjavaScriptの便利ライブラリについて、紹介していけたらと思っています。それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

マイナビ2019 採用エントリーはじめました。
LOADING