Categoryテキストエフェクト

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」

Text Opening Sequence with CSS Animations | Codrops

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

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

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」サンプル

(古いInternet ExplorerなどのCSS3に対応していないブラウザでは作動しません。)

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

→「映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」」の続きを読む

テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」

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

サンプルはこちら

→ 「Rotating Words with CSS Animations」サンプル

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

→ 「Rotating Words with CSS Animations」サンプル2

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

詳しくは続きをどうぞ。

→「テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」」の続きを読む