はじめてのCSS3アニメーション

このチャプターで何をつくるのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでつくるコンテンツと学習項目を始めに確認します。
講師:
02:02

字幕

このレッスンではチャプター全体を通して どのようなものを作り何を学習するのか ということを簡単にご説明します まず作るのは今画面でお見せしている テキストのアニメーションです アニメーションが時間差で動いていますね まず文字が浮き上がっているように見えます これは影を工夫して このような文字の浮き上がりを作っています それからフェイドイン フェイドアウトと 言われるような効果ですけれども animation というプロパティを使って 設定してみます それからアニメーションに 時間差がついています こうしたことについても学ぶ予定です では簡単に HTML ドキュメントの中身を 覗き見しておきましょう Dreamweaver で HTML ドキュメントを開いています アニメーションの設定というのは この animation プロパティです それから文字を浮き上がらせるには text-shadow というプロパティで 影をうまく工夫しています それから時間差で アニメーションするというのは このあたりの設定になります 細かいことは個々のレッスンで ご説明していきます それからもう一つ 使っていたフォントがちょっと 柔らかい感じのフォントだったと思うのですが あれはグーグルフォントの ウェブフォントを使っています この フォントの取り込み方についても ご説明する予定です このレッスンではチャプターの 内容をご紹介しました まず作るのは文字のフェイドイン フェイドアウトのアニメーションです 学習する項目としては ウェブフォントを使う それから影で 文字を浮き上がらせる そのテクニック そしてメインになりますけれども フェイドイン フェイドアウトの アニメーションをどのように設定するのか それからアニメーションに 時間差をつけるという ちょっとしたテクニックについても 紹介いたします

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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