AMG Solution

jQueryライブラリを使用して、文字列にさまざまなアニメーションを追加

こんにちは、樋口です。

今回は、文字列を色々なアニメーションで表示することができるライブラリ、textillate.jsについてご紹介します。

今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
textillate.js
0.4.1
BootStrap
3.2.0

ライブラリの入手

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

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。
 

 test9
   |- index.html
   |- bootstrap.min.css
   |- jquery.js
   |- jquery.textillate.js
   |- test.js
   |- assets
     |- animate.css
     |- jquery.fittext.js
     |- jquery.lettering.js
     |- style.css

HTMLファイル

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

10~11行目:
 textillate.jsで使用するCSSを読み込みます。
 
42行目:
 アニメーションをかける文字列を指定します。
 42行目の「id=”rippleria”」が、javaScriptで必要な指定となっています。
 次項で詳しく説明を行います。
 
50~52行目:
 textillate.jsで使用するjavaScriptを読み込みます。

以上で、HTMLは完成です。
次に、アニメーションをONにするための、javaScriptについて説明します。

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。
 
– test.js

 
3行目:
 アニメーションのループを指定します。(true: ループする。 false: ループしない)
 ※ ループをするにしない場合、終了時のアニメーション設定は無効となります。
 
4行目:
 アニメーションの間隔を設定
 
5行目:
 アニメーション開始の遅延時間を設定
 
6行目:
 アニメーションの自動スタート設定
 
10行目:
 アニメーションエフェクトの設定
 ※ エフェクトの種類については、textillate.js公式ページより確認してください。
   公式ページより、各エフェクトの動きを確認できます。
 
11行目:
 遅延指数の設定
 
12行目:
 各文字の遅延時間の設定
 
13行目:
 すべての文字に、アニメーションを同時適用する設定
 (true: 適用する。 false: 適用しない)
 
14行目:
 文字表示をランダムな順にする設定(true: 適用する。 false: 適用しない)

実行結果

最後に、実行イメージを下記に載せます。
※ 各エフェクトを、開始・終了時に変えて記載します。
 

開始エフェクト
flash
終了エフェクト
bounce

文字アニメーション1
 
 

開始エフェクト
shake
終了エフェクト
tada

文字アニメーション2
 
 

開始エフェクト
swing
終了エフェクト
wobble

文字アニメーション3
 
 
この他にも多くの設定ありますので、是非試してください!

最後に

今回紹介したライブラリを使用すれば、文字列をさまざまなアニメーションで、表現することができます。
ホームページの見栄えアップなどお考えの方は、是非お試しください。
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

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

SAME CATEGORY BLOG

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

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