テキストエフェクト | ぱんにゃっとTutorial

今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。

サンプルをみていただいたほうがわかりやすいと思います。

（古いInternet ExplorerなどのCSS３に対応していないブラウザでは作動しません。）

まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。

以前にテキストをアニメーションにするjQueryプラグイン『textualizer』をご紹介しましたが、今回はCSSアニメーションを使用して、文章の一部のテキストを演出的に切り替える「Rotating Words with CSS Animations」を紹介します。

サンプルはこちら

もうひとつサンプルです。

※CSS3を使用しているため、対応していないブラウザでは動作しません。

詳しくは続きをどうぞ。

ぱんにゃっとTutorial