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

サンプルはこちら

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

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

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

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

詳しくは続きをどうぞ。


『Rotating Words with CSS Animations』のソースを一式ダウンロードすることができるので、それを利用してサイトを作成することができます。

こちらからソースをダウンロードできます。→ Rotating Words with CSS Animations

まず<head>~</head>に、CSSの設定をします。ダウンロードしたソースには5種類のstyle.cssが用意されています。

<body>部にh2要素としてテキストを固定させる文章と切り替える単語とわけて記入します。

ダウンロードしてきたファイルの中には全部で5種類のパターンのサンプルがありますので、いろいろ試してみてください。CSSに詳しい方は好きなようにカスタマイズできると思います。

以下はサンプルのソースです。CSSは文字位置や大きさの調整しか変更せずに、そのまま使用しています。

どうぞご参考まで。

サンプル1

サンプル2

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