昨今のWEBでは先進的な技術を使いユーザーを魅了するサイトが多いように感じます。
先日、リッチな動きとより良いユーザー・エクスペリエンスをあなたのサイトにプラスする方法と言うSmart Transitionの記事を書きましたが、その内容に近いユーザー・エクスペリエンスを向上させる方法です。
今日はWEBサイトで文字に動きを付ける方法をご紹介したいと思います。
テキストデータにエフェクトを付ける方法
まずは先人たちの作例を見てみましょう！
Quoitworks
Quoitworksさんのサイト、ページに入るとページタイトルがアニメーションします、カッコイイですね。
このようなエフェクトを実装するにはjQueryのプラグインを使用します。
世界中の天才クリエイターさまによって多くのプラグインが作られていることにいつも感謝しております、 ありがとうございます！
多くのサイトで文字にアニメーションを付ける件は、紹介されているのでココでは主要プラグインのみご紹介したいと思います。
これであなたのサイトもお手軽リッチ！
textillate.js
多くのサイトで使用されているのを見かける、有名プラグインですね。
ひとまず、サイトに動き付けたかったらコレを試してみることをオススメします。
Text Effects
こちらはtextillate.jsと違った雰囲気のエフェクトがかけられます、近未来とかサイエンス・フィクションっぽいサイトに向いていますね。
jQuery Super Simple Text Rotator
こちらは文字をクルクルと切り替えられるプラグインです。訴求したいポイントが複数あるときとかに、クルクル回すと面白いかもしれませんね。
これはCSSでアニメーションを付ける方法です | TEXT OPENING SEQUENCE WITH CSS ANIMATIONS
なんかミステリアスな海外ドラマとか、ハリウッド映画のイントロで流れそうな文字エフェクトです。Xファイルを思い出しましたw
SVGで書き順アニメーションする方法
それではこちらも作例を先に見てみましょう。
Amazing in Motion
こちらはスクロールして、2番目のセクション「STEPS」と言う文字の現れ方に注目してみました。
はじめみたとき「な…なんだ、このエフェクトは。文字Strokeにエフェクトが付いてる。」と驚愕しました。
文字1つ1つにエフェクトを掛けるのはプラグインなどを使用すればできますが、文字が実際に書かれていくエフェクトってはじめてみたので。
jQueryでもCSS3でもFlashでもない。。。
インスペクタでコードを追っても出てこないし。
もしかしてと調査した結果、これ流行りのSVGなんじゃないか！？と。
その線で検索をかけたところ、こんなLazy Line Painterと言うプラグインが出てきました。
「プラグインあるのかよｗ」と。世界には天才がゴロゴロしているんだなあと、改めて痛感いたしましたよ。
しかも、プラグイン紹介サイトにSVGをデータ化する機能まで付けてくれています。
いたれりつくせり。
Lazy Line Painterの使い方
ページトップにデモがありますね。このようにデータにしたSVGをブラウザ上で描いてくれます。
GitHubの右カラム、Downloadボタンからプラグインやデモなどファイル一式ダウンロードできます。
中身を確認してみましょう、index.htmlがデモファイルになるので開いてみましょう。
プラグイン・サイトのトップページでも流れていたSVGファイルがアニメーションします。
このアニメーションを自分の作成したSVGに差し替えてみましょう。
まずはイラストレーターでSVGファイルを作成します。
絵でも文字でもなんでも大丈夫です。
今回は例にしたサイトの「STEPS」と言う文字をアニメーションさせてみましょう。
フォントを選んでタイプし、アウトライン化して、シングル・パスにします。
（※塗りが入っているとそこも描画されてしまうので、シングル・パスにしましょう。また文字の太さはJSで変えられるので気にしないで大丈夫です）
面白いアニメーションにするため、文字の途中でパスを切っておく（Sの真ん中でパスを切るなど）と良いかもしれませんね。
完成したらSVG形式で保存しましょう。
では、次に作成したSVGをサイトの「SVG TO LAZY LINE CONVERTER」で変換しましょう。
ドラッグ・アンド・ドロップで変換可能です。
ドラッグ・アンド・ドロップすると、プレビューと色み調整フェーダー、コピーボタンが出てきます。
色は後で変更もできるので、コピーボタンを押し出力されたSVGデータをコピーします。
あとは、デモのコードで該当箇所をコピーしたコードに差し替えるだけです。
（※HTMLのID名が変わっていると思いますので、SVGファイル名にIDを修正して下さい。）
Vimeoにチュートリアル動画もあったのでコチラも合わせて参考にしてみてください。
Js doitでデモを作成しました。
おまけ：FlashファイルからSVGを作れるSwiffy
上記のSVGからJS制御し書き順アニメーションを作る件を、SNSで書いたところ
知人WEBデザイナーさんから下記のサイトも教えてもらいました。
こちらは、Swiffyを使ってFlashファイルを変換したのかなーって事でした。
http://kyoto.ficc.jp/
文字の書き順や、エフェクトなど再現するにはFlashで一度作成し、その後にSVGに変換したほうがクウォリティは上がるかもしれません。
（その分、手間はかかりますが。案件によって使い分けたいところですね。）
詳しくはこちら「Google、FlashをSVG/JavaScriptに変換するツール「Swiffy」を発表」の記事を参照して下さい。
以上になります。