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 からソースを一式ダウンロードします。

<head>部分でCSSファイルを読み込ませます。


続いてjQueryと使用しているjQueryプラグインを読みこませる記述をします。


これで準備完了です。
<body>部分に以下のように記述をします。アニメーションさせたいテキストを<h2>タグで囲みます。


仕組みを知りたい方は、ダウンロードしてきたファイル一式を解析してみて下さいね。

アイデア次第で、予告ページなどにも使えるテキストアニメーション効果ではないでしょうか。

最後にサンプルのソースを書いておきます。どうぞご参考まで。



この記事と関連してると思われる記事: