以前にテキストをアニメーションにするjQueryプラグイン『textualizer』をご紹介しましたが、今回はCSSアニメーションを使用して、文章の一部のテキストを演出的に切り替える「Rotating Words with CSS Animations」を紹介します。
サンプルはこちら
→ 「Rotating Words with CSS Animations」サンプル
もうひとつサンプルです。
→ 「Rotating Words with CSS Animations」サンプル２
※CSS3を使用しているため、対応していないブラウザでは動作しません。
詳しくは続きをどうぞ。
『Rotating Words with CSS Animations』のソースを一式ダウンロードすることができるので、それを利用してサイトを作成することができます。
こちらからソースをダウンロードできます。→ Rotating Words with CSS Animations
まず<head>～</head>に、CSSの設定をします。ダウンロードしたソースには5種類のstyle.cssが用意されています。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style3.css" /> <script src="js/modernizr.custom.72111.js"></script> |
<body>部にｈ２要素としてテキストを固定させる文章と切り替える単語とわけて記入します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<section class="rw-wrapper"> <h2 class="rw-sentence"> // 固定させるテキスト <span>Real poetry is like</span> <span>creating</span> <div class="rw-words rw-words-1"> <span>breathtaking moments</span> <span>lovely sounds</span> <span>incredible magic</span> <span>unseen experiences</span> <span>happy feelings</span> <span>beautiful butterflies</span> </div> <br /> <span>with a silent touch of</span> <div class="rw-words rw-words-2"> // 切り替えたいテキスト <span>sugar</span> <span>spice</span> <span>colors</span> <span>happiness</span> <span>wonder</span> <span>happiness</span> </div> </h2> </section> |
ダウンロードしてきたファイルの中には全部で５種類のパターンのサンプルがありますので、いろいろ試してみてください。CSSに詳しい方は好きなようにカスタマイズできると思います。
以下はサンプルのソースです。CSSは文字位置や大きさの調整しか変更せずに、そのまま使用しています。
どうぞご参考まで。
サンプル１
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」サンプル</title> <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style3.css" /> <script src="js/modernizr.custom.72111.js"></script> <style> .no-cssanimations .rw-wrapper .rw-sentence span:first-child{ opacity: 1; } </style> <!--[if lt IE 9]> <style> .rw-wrapper{ display: none; } .rw-sentence-IE{ display: block; } </style> <![endif]--> </head> <body> <section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Dear</span> <br /> <span>I like your</span> <div class="rw-words rw-words-1"> <span>spice</span> <span>colors</span> <span>happiness</span> <span>song</span> <span>sugar</span> <span>smile</span> </div> </h2> </section> <h2 class="rw-sentence-IE">Dear I like your spice</h2> </body> </html> |
サンプル２
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」サンプル２</title> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style5.css" /> <script src="js/modernizr.custom.72111.js"></script> <style> .no-cssanimations .rw-words span:first-child{ opacity: 1; color: #fff; text-shadow: none; } </style> <!--[if lt IE 9]> <style> body{ background: #fff; } .rw-wrapper{ display: none; } .rw-sentence-IE{ display: block; } </style> <![endif]--> </head> <body> <section class="rw-wrapper"> <h2 class="rw-sentence"> <div class="rw-words"> <span>Bill Evans</span> <span>Oscar Peterson</span> <span>Bud Powell</span> <span>Barry Harris</span> <span>Thelonious Monk</span> <span>Red Garland</span> </div> <span>Jazz and Freedom go hand in hand.</span> </h2> </section> <h2 class="rw-sentence-IE">My favorite Jazz is Bill Evans</h2> </body> </html> |
あわせてお読みください
Text Opening Sequence with CSS Animations | Codrops 今回は、テキストを映画のトレーラーやオープニング風にア…
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。 テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すこと…
今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。 サン…
コメントを残す