会社のビジョンなど短いメッセージ・テキストを印象的に伝えることができる、テキストアニメーションはないか？と探していた所見つけた、全16種類のテキストアニメーションを扱った ＜MOVING LETTERS＞ をご紹介します。

こちらを提供しているのは、スウェーデン在住フリーランスのフロントエンド・デザイナー/講師の Tobias Ahlin (トビアス・アーリン) さんです。サイトのデザインやソースコードはフリーの MIT ライセンス管理となっており、自由に使用することができます。

試しに「Sunny mornings」と書かれたテキストが前面から大きくアニメーションしていくエフェクトを見てみましょう。ソースコードは HTML、CSS、Javascript (以下js) の3つに分けられており、カスタマイズが容易になっています。(アニメーションを表示するには以下の anime.js の CDN が必須となっています)

https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js

例えばループを一回表示にし、文字の表示を残したい場合

「Sunny mornings」テキストアニメーションに少し手を加え、テキストアニメーションのループを1回表示とし、最後に消えてしまう文字を残したい場合は、js の以下コードを変更します。まずはアニメーションがループになっている箇所。

anime.timeline({loop: true})

の loop : true の部分を false にすればループを解除でき、1回表示となります。

また最後に文字が消えてしまうデフォルト設定を、文字を残すようにしたい場合は、透明度の設定部分 opacity

.add({
targets: '.ml2',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});

の 0 の部分を 1 にすることで文字が残ります。このように簡単にカスタマイズし、テキストアニメーションを取り入れることができます。是非あなたもテキストアニメーションを取り入れ、ステートメントやビジョンなどのメッセージをエモーショナルに伝えてみて下さい。