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>タグで囲みます。

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

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

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

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