CSS3によるタイポグラフィ

テキストをフェードイン・フェードアウトさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティで、テキストにフェードインとフェードアウトのアニメーションを加えます
講師:
08:45

字幕

このレッスンではテキストにフェードインと フェードアウトのアニメーションを加えます 今ブラウザーで開いている HTMLドキュメントは文字が段々と消えて あるいは段々と出てきてという アニメーションを繰り返しています またよく見るとテキストの周りに 光るような影がやはり同じような 同期したアニメーションとして動いています この設定をanimationプロパティを使って 行ってみたいと思います Dreamweaver CCでまだアニメーションを 加える前のHTMLドキュメントを開きました テキストはP要素 クラスfocus と言う中に入力してあります そしてこのfocus という クラスなんですけれども jQueryのプラグイン lettering.JS を使って jQueryのJavascriptコードで Letteringメソッドを呼び出して span要素に切り分けるという事を行っています ですからアニメーションは span要素に対して実行するという予定です 現在span要素には基本的なカラー それからpositionの設定しかしてありません 今の状態を確認しましょう ファイルメニューから ブラウザーでプレビューします アニメーションしませんので白いテキストが はっきりくっきりと出ているだけです ここにフェードインとフェードアウトの アニメーションを加えます アニメーションはspanのセレクターに対して animationプロパティで設定します animation ですね そしてまず最初に 指定するのはアニメーションを定める これから定義するんですけれども @keyframes規則の名前を指定します 名前は自由に決められるんですけれども ここでは‟Get Focus”という名前に決めます そしてtransitionと同じなんですけれども 何秒かけてそのアニメーションを 行うのかという時間を最低限設定します 他にもプロパティの値はあるんですけれども 設定をしなければデフォルト値が使われます そして@keyframes規則です 複数形 ‟S” が付くのでご注意ください そしてkeyframes規則については 名前を指定します ここで付けた名前と同じ名前を 使わないといけませんのでコピーをします そして@keyframes規則では アニメーションをどういう状態から from ですね どういう状態へ to この2つの設定をします この中にはCSSで自由に プロパティを設定することができるわけで 今回はまずカラーを使いましょう Color で RGBAで設定します スタートは… fromは白で255ですね そして最初は見えないので透明とします 今度はその状態からtoですね 最終的にどうするのか カラーをRGBAでやはり同じ 蛍光なんですけど少しだけ変えて 244 241 208 という事で 完全な不透明よりはちょっと 手前という感じなんですけども こんなうっすらとした黄色ですね に設定します これでアニメーションの プロパティの設定ができ その設定をアニメーションするための @keyframes規則 同じ名前で設定しましたので このカラーからこのカラーへ 基本的には 完全な透明からほぼ不透明に近い状態に アニメーションすることになります では一旦ファイルを保存して ブラウザーでプレビューしましょう 完全な透明から完全な白に近い形 そして最後これ完全な白に見えますね 実はこれは完全なホワイトになっています なぜか? ではDreamweaver CCの方に 戻りましょう HTMLドキュメントでspanのセレクターの カラーが設定されていますね ここで white になっています ですからアニメーションを一回終了して 少し黄色がかった白になった後 ホワイトに戻るという事なんですね ですからこのwhiteが効いています さらに@keyframes規則を加えましょう text-shadow です そして影はまず ずれ幅ですね 水平と垂直にどれくらいずらすかということで 今回はずらしません という事でXY共に0ピクセル テキストと同じ位置です 次にぼかし幅です どれぐらいぼかすかと 1emとしましょう そして影の色ですね これはwhiteにします そして今度は to なんですが基本的には この設定を活かしながらという事で コピーをもらいます そしてぼけ幅はどんどん縮めていくという事で 1ではなくて0.1とします それからアニメーションの プロパティなんですが 何も設定しなければプロパティは デフォルトなんですけど1つ加えましょう Infinite ‟永久に”という意味です 何が永久かと言うと繰り返しです これを加えるとアニメーションが繰り返します では確認してみましょう ファイルを保存して ブラウザーでプレビューです 今度は影がついてますね それから一旦くっきりした後に透明に戻ります その上でまた段々 はっきりとしてくるということですね 影の方はぼわっとした状態から 段々くっきりしてくるという事で フェードインの状態ができたと しかしフェードアウトじゃないですね いきなりぱっと透明になっています これをフェードイン フェードアウトに したいと思います ではDreamweaver CCの方に戻りましょう animationプロパティの値として infinite で繰り返したんですけれども その繰り返しを行ったり来たりという 単純に行って最初に戻りまた行ってではなくて 行ったらその行った状態から戻ると ヨーヨーの様に繰り返すんですけれども その場合にはalternate という キーワードを使います これが 行ったり来たりの意味になりますので フェードイン フェードアウトの アニメーションになります ではファイルを保存して ブラウザーでプレビューします 段々くっきりして くっきりした後 今度は逆に潮が引くように 段々 透明になっていきます 透明になると影がぼやっと広がってくると フェードイン フェードアウトの アニメーションになりました このレッスンでは animationプロパティを使って テキストのフェードインとフェードアウトの アニメーションを作りました animationプロパティはまず最低限 最初に@keyframes規則の名前を指定します そしてその名前で@keyframes規則で どういう状態から ‟from”という プロパティを設定し どういう状態へ ‟to”というプロパティを設定すると そのプロパティの値を アニメーションするという事になります その@keyframes規則の名前の後は transitionプロパティと 同じ要領なんですけれども 時間 それから繰り返しのキーワード ‟方向”と言いますけれども 行ってまた最初にすぐ戻ってしまうのか 行ったり来たりするのかといったキーワードで アニメーションの バラエティを作る事ができます

CSS3によるタイポグラフィ

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

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

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

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

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