東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェア一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね!僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。いうのをWeb上でもインタラクティブに出来たら最高ですよね?如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。今回は、手間暇要らずで容易にテキストエフェクト(アニメーション)を実装する素敵なjQueryプラグインtextillate.jsを紹介したいと思います。色んなエフェクトがあるので、まずはtextillate.jsの公式デモページでエフェクトを確認してみましょう!僕のほうでもデモを作ってみましたので、下記をご参考下さい。依存ライブラリを読み込むtextillate.jsは以下のライブラリを使ってますので、まずはこれらを読んであげて下さい。Title</h1>基本の書き方は以下の通り、これでデフォルトのエフェクトが適用される。$('.ef').textillate();})もっと詳しくエフェクトを指定エフェクトの指定はjs或いはhtmlのdata属性からできます。}});※エフェクトの名前やプレビューはAnimate.cssの公式ページから注意点アニメーションはCSS3をベースにしているため、モダンブラウザでしか確認できないので、ご注意を。個人的には一番しっくりきたのがtextillate.jsだったのですが、他にも色々ありますので、ご参考まで。Effect映画「マトリックス」のテキストエフェクトと似ている。Lettersマウスオーバー時に文字にスライドエフェクトがかかる。Textテキストがどんどん画面に向かって飛んでくるエフェクト。Demoページのリンクを削除しました。RainbowsテキストにグラデーションをかけられるDemoページTextualizertextillate.jsと似通っているが、IEもサポートしています。その代わりにエフェクトの種類は少ない。Demoページおわりいかがでしたか?少しは興味を持って頂けたのでしょうか。一味違うサイト作りにはおあつらえ向きのプラグインばかりだったと思いますが、ご参考になったら嬉しいです。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。