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

#JavaScript

記事をシェア：

コピー

こんにちは、樋口です。

今回は、文字列を色々なアニメーションで表示することができるライブラリ、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
　
これで準備は完了です。

フォルダ階層

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

HTMLファイル

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

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>textillate.jsサンプル</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="./assets/style.css">
    <link rel="stylesheet" href="./assets/animate.css">
	<style type="text/css">
	<!--
		.container {
		  width: 1160px;
		  margin: 0 auto;
		  padding: 50px 40px;
		  box-sizing: border-box;
		}
		.tatle-style {
		  margin: 0 0 50px;
		  padding-bottom: 15px;
		  border-bottom: 1px solid #eeeeee;
		}
	-->
	</style>
  </head>
  <body>  
	<div id="wrap">
	  <div class="container">
		<div class="col-lg-12">
		  <div class="form-group" style="text-align: center;">
			<h1 class="tatle-style">textillate.jsサンプル</h1>
		  </div>
		  <div class="form-group">
			<span></span>
		  </div>
		  <form class="form-signin" id="commentForm">
            <div class="col-lg-12" style="margin-top: 10px;">
              <div class="form-group">
                <div class="col-lg-12" style="text-align: center; margin-top: 10px;">
                  	<span class="test1" style="font-size: 26px;">株式会社AMGSolution</span>
                </div>
              </div>
		  </form>
		</div>
	  </div>
	</div>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./assets/jquery.fittext.js"></script>
    <script type="text/javascript" src="./assets/jquery.lettering.js"></script>
    <script type="text/javascript" src="./jquery.textillate.js"></script>
    <script type="text/javascript" src="./test.js"></script>
  </body>
</html>

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

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

javaScriptファイル

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

$(function() {
    $('.test1').textillate({
      loop: true,  
      minDisplayTime: 2000,  
      initialDelay: 500,  
      autoStart: true,  
  
      // アニメーション設定(開始)
      in: {
        effect: 'flash',  
        delayScale: 3,  
        delay: 50,  
        sync: false,  
        shuffle: false
      },  
  
      // アニメーション設定(終了)
      out: {
        effect: 'bounce',  
        delayScale: 2,  
        delay: 45,  
        sync: false,  
        shuffle: false
      }
    });
});

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