【アニメーションを学ぶ】テキストを１文字づつアニメーションさせる

今回はアニメーションの表現方法を学ぶために、テキストを1文字づつアニメーションさせてみました。
アニメーションの部分にはTweenMax、スクロールイベントにScrollMagicを使用しています。どちらも非常に有名なライブラリなので既にご存じの方も多いと思いますが、簡単にいうと“アニメーションに特化した機能を提供するJavascriptのライブラリ”です。例のごとく、TweenMaxやScrollMagicをまだご存じない方や使い方が解らないという方は既にたくさんの情報が発信されていますので自分なりに調べてみることをオススメします。

因みに私はSONICMOOVさんのこちらの記事で概要を学ばせていただきました。
高機能JavascriptアニメーションライブラリTweenMax.jsの使い方！

何を作ったか？

タイトルにもあるようにテキストを１文字づつアニメーションさせてみたのでまずはデモページを御覧ください。

DEMO　-　デモページを見る

はい、PPAPです。
テキストを1文字づつアニメーションさせるためには扱いたい文字の単位で何らかのグループを作らなくてはいけません。私はいつもJavascriptを使用して扱いたい単位にspan要素を付け加えますが、HTMLで地道に要素を振っていっても同じことです。本当はTweenMaxでもテキスト操作を行う為のプラグインも提供されていますが、有償のコミュニティに参加しないといけないので私は自前で用意しています。

せっかくなのでCSSのclipプロパティを使って前回作成したパララックスページにこのアニメーションを追加してみました。

DEMO　-　デモページを見る

個人的には文字が動くだけでも面白いですがデザインが当たっていると落とし込めている感があって雰囲気も違って見えますね。あとはフォントの種類が違うだけで完成度が一気にあがりますし、ミュージックなんて流れたらさらに上がってしまうんでしょうね。う〜ん楽しい。

ECMAScriptとJqueryの混じった気持ちの悪いコードですが一応ソースコードはこんな感じです。

PPAPのソースコード

<!--// HTML -->
<h2 class="contents-title">I HAVE A PEN.</h2>

<!--// JS -->
<script>
(function(){
var elements = document.querySelectorAll( '.contents-title' );
var words = [];

$.each( elements , function( i , val ){

  var sentence = this.textContent;
  words[i] = sentence.split(' '); // 取得した文字列を単語単位に分割している

  this.innerHTML = null;

  $.each( words[i] , function( j , val ){

    var word = document.createElement('span');
    word.className = 'word'; // 分割した単語の要素にcssのクラスを.wordとして追加
    elements[i].appendChild(word);

    words[i][j] = val.split(''); // 単語単位に分割した文字列を文字単位に分割
    
    $.each( words[i][j] , function( k , val ){

      var string = document.createElement('span');
      string.className = 'string'; // 分割した文字の要素にcssのクラスを.stringとして追加
      string.innerHTML = words[i][j][k];

      word.appendChild(string);

    });

  });

});
}());
</script>

<!--// CSS -->
<style>
/* 単語単位を扱うクラス */
.word {
  display: inline-block;
  margin: 0 0.25em;
}
/* 文字単位を扱うクラス */
.string {
  display: inline-block;
}
</style>

とまぁ大体こんな感じです。

ループの処理だけjqueryのeach関数を使っているのには特に理由はありません。楽なのでつい。。。くらいの感じです。
大したことしているようには見えないんですが配列の中に配列を作っていく多次元配列なので、デザイナーさんだと少し混乱しちゃうかもですが単純に配列の中に配列を作っていくだけです。このコードを見て何をしているかさっぱりという方は配列操作の仕方と配列って何に使えるの？？ということを学んでみると出来ることが一気に広がると思います。
もちろん無理してJavascriptを使うくらいなら、そこの学習はいったん後回しにして最低限TweenMaxとScrollMagicの使い方を憶えてしまったほうが表現方法を磨くという意味では近道だと思います。

まとめ

よく勘違いされてしまうのが私は決してプログラムを学びたいのでありません。グラフィックデザイナーさんが印刷の紙や印刷方法について学ぶように、WEBデザイナーの私はWEBでの表現方法を学びたいと思っています。以前はwebGLやThree.jsなんかも色々と手を出してなんか良く分からない可能性を勝手に感じたりする反面、学習コストがあまりに高いなと思っていました。
ただ最近よく思うのですが「デザイン出来て構築出来てJSも使えるのに、Three.js使っても球体や多面体がクルクルするだけの何の面白味もないものしか作れないのは本当に学習コストが高いという理由だけなんだろうか？？　むしろ学習コストはものすごく低くて、足りないのは表現に対するイマジネーションのなさが問題なのでは？？」
そう思って実際にCSSアニメーションだけで何かを作ろうと思った時、全くアイデアが出てこず自分の想像力の弱さにかなり落ち込みました。
そのため、ここ最近は作り方や使い方、さらには仕組みの部分にウェイトをおかず、作るものにウェイトをおいて学習しています。サンプルをいちいちデザインに落とし込むのもそのためです。
ここまで記事を読んでくれている方は、きっと同じようなことに悩んでいる方だと思います。

「あなたはどんなアニメーションを完成させたいですか？」

もしこの質問に即答出来ない方は、私のようにダサくても良いからとにかく完成させることを目標に学習していくとよいかもしれません。私も現在は即答できません。自分なりの学習方法を見つけて一緒にWEBの表現を学んでいきましょう。

ANIMATION

何を作ったか？

PPAPのソースコード

まとめ