CSS3のアニメーションテクニック

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

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

ぜひご覧ください。

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

字幕

このレッスンではチャプターを通して どのようなコンテンツを作り 何を学ぶのかという概要をご説明します 作るのはフォトギャラリーです ボタンをクリックすると写真が切り替わります まずこのボタンなのですけれども これは CSS で へこんだような表現をしています 影をうまく利用します 次に クリックした時に 切り替わるんですけれども URL をよく見ていただくと クリックした時にターゲットがついています 実は このボタンの色の切り替えも そうなんですけれども 写真の切り替えも このターゲットを キーにして行っています ターゲットをキーに CSS の設定を 切り替えるということです 次にこの画像の切り替え方は ふわっと これクロスフェードと 言うんですけれども 一つ目の画像はだんだん透明に 次の画像はだんだん透明から くっきり見えてくるようにと これを同時に行うと こういうふわっとした 切り替え方になります このアニメーションについてもご説明します それから画像の両端に影がついています この影がついていることによって この画像の左隅と右隅が 少し手前に せり出ているように見えます これ実は 画像そのものは 四角いんですれども 影が付いています この影は CSS でまず要素を加え そこに影をつけ しかも斜めにしていると このテクニックについても ご紹介することになります このレッスンでは チャプターを通して何を作るのか 何を学ぶのかという概要をご紹介しました 作るのはクロスフェードする フォトギャラリーです 学習する項目としては 丸く凹んで見える影の工夫です 次にターゲットを使った URL についてくるターゲットを使って 画像やボタンの状態を切り替える という設定の切り替え そして画像をクロスフェードする というアニメーション そして CSS で要素を加えてしまう という その加え方 最後に 要素を斜めに変形するということに ついてもご紹介することになります

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

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

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

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

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