テキストにアニメーション効果を付けることができるTextEffectを試してみる

2014年05月31日 10時26分

201405311026HCSW00.png

はじめに

TextEffectは、 テキストに簡単なアニメーション効果を付けることができるJQueryプラグインです。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

TextEffectの使用方法

TextEffectは、アニメーション効果を付けたいテキストに対して、任意のクラス名を指定するだけで使用できます。

  1. 環境設定

    設置に必要なアーカイブをダウンロードし、解凍します。 

    $ cd /tmp/demo
$ wget -q https://github.com/fourdesire/texteffects/archive/master.zip
$ unzip -q master.zip
$ rm -f master.zip
$ mv texteffects-master texteffects
  2. jsファイルの指定

    texteffects.min.jsを指定します。 

    <script src="texteffects/javascripts/texteffects.min.js"></script>
  3. コンテンツの作成

    テキストに任意のクラス名を指定して、コンテンツを作成します。 

    <p class="text-effect">写真ACで見つけた草原の写真です。</p>

    上記の例では、1行のみアニメーション表示されますが、ul～liを使用すると、複数行のテキストをアニメーション表示できます。 

    <ul class="text-effect-loop">
  <li>写真ACで見つけた</li>
  <li>レインボーブリッジの写真です。</li>
</ul>
  4. JavaScriptの指定

    TextEffectのロードを行うJavaScriptを追加します。 

    <script>
  $(function() {
    $('.text-effect').textEffect();
    $('.text-effect-loop').textEffectLoop();
  });
</script>
    062.html 
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>062</title>

    <link href="bootstrap.min.css" rel="stylesheet">

    <style>
      body { background: #888; margin-top: 50px; }
      h4 { color: #fff; }
      ul { list-style-type: none; }
      img { width: 50%; }
      .text-effect { color: #bf3119; }
      .text-effect-loop { color: #47ea7e; }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <article>
            <h4>Chapter 1</h4>
            <p class="text-effect">写真ACで見つけた草原の写真です。</p>
            <img src="img/056-01.jpg" alt="/" title="草原">
          </article>
          <article>
            <h4>Chapter 2</h4>
            <ul class="text-effect-loop">
              <li>写真ACで見つけた</li>
              <li>レインボーブリッジの写真です。</li>
            </ul>
            <img src="img/056-02.jpg" alt="/" title="レインボーブリッジ">
          </article>
          <article>
            <h4>Chapter 3</h4>
            <p>写真ACで見つけた向日葵の写真です。</p>
            <img src="img/056-04.jpg" alt="/" title="向日葵">
          </article>
        </div><!-- col-6 -->
        <div class="col-md-3"></div>
      </div><!-- row -->
    </div><!-- container -->

    <script src="bootstrap.min.js"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="texteffects/javascripts/texteffects.min.js"></script>
    <script>
      $(function() {
        $('.text-effect').textEffect();
        $('.text-effect-loop').textEffectLoop();
      });
    </script>
  </body>
</html>
    デモは、062.htmlからご覧頂けます。
    ファイルは、062.zipからダウンロードできます。

▲