CSS3によるタイポグラフィ

文字ごとにアニメーションを変える

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストを文字ごとの要素に分け、それぞれに異なる時間とタイミング関数を定めます。
講師:
10:39

字幕

このレッスンではテキストの一文字一文字に 異なるアニメーションを設定してみます 今ブラウザで開いているHTMLドキュメントは 文字がぞれぞれバラバラに アニメーションしています もっとも基本的にはフェードインとフェード アウトを繰り返すアニメーションですが その繰り返す時間 そして値の変化の仕方を変えることによって 文字のアニメーションに バリエーションを与えています このような設定を行ってみましょう DreamweaverCCで開いた HTMLドキュメントには 既にアニメーションの設定はしてあります ただし文字ごとではなく 全体に対して 同じアニメーションが設定されています ですからこのStay focused!という "p"要素のテキストが 全体を通して同じアニメーションをします 確認しておきましょう ファイルからブラウザでプレビューです フェードインとフェードアウトの アニメーションが行われますが すべての文字に共通の アニメーションになっています これを文字ごとにバラバラにしましょう 文字ごとに異なるアニメーションを 与えようとすると 文字をそれぞれ別の要素に 切り分けておかなければなりません けれど"p"要素は1つのテキストが 入っているだけですね けれどもこの切り分けの設定は 既にすんでいます というのはこの"p"要素には''focus'という クラスが与えられていますが jQueryのプラグインlettering.jsで jQueryのJavaScriptコードを書いてあって focusをletteringというメソッドで それぞれspan要素に分ける ということは既にできています 確認しましょう もう1度ブラウザでプレビューします アニメーションは勿論変わりませんが 要素の詳細を表示してみると span要素にそれぞれ分かれていて すべてに別々のクラス char1から始まってchar13までですね 連番のクラス名が与えられていますので このクラス名に対して アニメーションを設定すればいい ということになります span要素のクラス名を使って セレクターを設定し 文字ごとのアニメーションを設定します まず最初の文字はchar1でしたね それに対してアニメーションを設定します 全体同一でなくなりましたので これを移動してしまいましょう ではこの調子であと4つ コピーしてしまいます ペーストはCTRLもしくはコマンドVですので ショートカットを使わせてもらいます 最初の4文字です char1から2 3 4 とします アニメーションは変わらないですが 最初の4文字だけ アニメーションが加えられることになります ファイルを保存して確認しましょう ブラウザでプレビューします 最初の4文字だけがフェードイン フェードアウトのアニメーションを行います では少しこれをばらかしてみます アニメーションプロパティに定める 最初の値は @keyframes規則に定めた名前で この規則に従って アニメーションさせるということになります それから時間と 繰り返し 行ったり来たりという 方向が定められていますが 他にも定められる値があります その中のタイミング関数と言いますが どういうふうに値を変化させるのか という設定ができます 関数のキーワードを入れるのですが まず最初は"linear" 線形の変化です 全部バラバラにしてみましょう 次は"ease" これはデフォルトですので 省略するとこの"ease" になります 次は"ease-in" 段々加速する というタイプの変化の仕方です 今度は逆に段々減速するというのは "ease-out" になります 設定4つは基本的に変わりませんが 値の変化のさせ方だけ変えました これは変化の仕方を確認するのには うってつけです ファイルを保存して確認してみます ブラウザでプレビューです くっきりするタイミング 消えるタイミングは 同じなんですが その間の値の変化の仕方が変わりますから 途中の状態を見るとバラバラに見えます これがタイミング関数による 値の変化の仕方が違うということです ではあとの文字も順々に変えていきましょう 4文字のアニメーションを設定しましたので またこれをコピーして更に4文字 違う設定にしたいと思います コピーして ペーストですね 4から5 6 7 8 と クラス名をそれぞれ定めました では5からですけど 5は "linear"でいいでしょう 6は "ease-in" にしましょう 7は "linear" 特に何か意図があるわけではなく ただバラバラにしています 8は "ease" にします 時間もバラバラにしてみましょう 少しずつ変えます あまり派手に変えてしまうと バラバラになりすぎますので 少しずつ数秒の差で変えていきます char4は 4.4 これも特別な方針があるわけではなく 単にバラバラにしているだけですが 大体 3 4 5 の辺りで (6は) 4.2 7は5.9 8は だいたい5を基準に 少しずつ変えていきます これでアニメーションの時間 つまり周期が変わります 行ったり来たりの周期が変わります よりバラつきが増えますので 確認してみましょう 保存してブラウザでプレビューです スタートが一緒ですので初めはあまり 差がないように見えますけど 繰り返していくうちに周期の差というのが 段々バラバラになってきて それぞれが勝手にフェードイン フェードアウト しているという感じになります では残り5文字設定しましょう 残り5文字ですので5文字分 コピーを貰ってきます そして時間とタイミング関数ですが その前にクラス名を変えておかないと 失敗したりしますので 9 10 11 12 13 ですね 9からいきますが 9は 5秒 "linear" でいいでしょう 10は4.6秒 これも "linear" にしてしまいましょう 同じlinearですが周期が違うので バラつきが当然でてきます こちらの char11も linearとして 秒数を変えてないですね 秒数は6秒にしましょう 少し長めです 最後の文字5.5秒で 一回も使っていない "ease-in-out" を使っておきましょう こんな感じで設定します ファイルを保存して ブラウザでプレビューしましょう すべてにバラバラのアニメーションが 設定されました もっとも@keyframes規則の フェードイン フェードアウトの 初めと終わりの設定は同じなんですけれど 時間と値の変化をするタイミング関数を 変えることによって バラバラなアニメーションに 時間がたつに従って よりバラつきが増えてきますね 結構面白いアニメーションが できたのではないでしょうか このレッスンでは文字ごとにバラバラな アニメーションを設定してみました フェードイン フェードアウトという @keyframes規則の設定は同じですが アニメーションの時間やタイミング関数を バラつかせることによって それぞれにバリエーションのある アニメーションを与えました

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

4時間01分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年08月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。