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

このチャプターでつくるコンテンツと学習項目を始めに確認します。

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

ぜひご覧ください。

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

字幕

このレッスンでは このチャプターを通して作るコンテンツと 学習する項目について簡単にご紹介します 作るのは今画面に出ている この4つのカードの様なコンテンツです マウスポインターを合わせると 角度が変わって 手前にせり出している様に見えます けれども3Dの機能を 使っている訳ではありません 影を最初に小さめに付けておいて ポイントを合わせた時に要素を拡大すると共に 影も少しぼやっとよげています そうする事で3D風に見えるという仕組みです この角度の変え方、伸縮の仕方について このチャプターではご紹介します 更にこのアニメーションは実は基本的には 同じ設定なんですけれども 違って見えるのは 最初の状態を変えているからです 最初のこの傾き方、位置を変える事によって 別々のアニメーションがついてる様に見えます こうしたバリエーションの 与え方もご紹介します あともう一つ細かいんですけども大事なのは 重ね順です 先程言いました通り これは3Dではありませんので 何もしなければ拡大をしても 重ね順は変わらないんです ところがちゃんと 拡大する物が手前に来ている様に 手前に重ね順を持ってきていると言う事は 重ね順を変更するというプロパティの 設定が必要になります このレッスンでは チャプター全体を通して作る コンテンツをご紹介しました 回転と伸縮と影を使って 3D風に見せるという カードのコンテンツでした 学習する項目としては 要素を回転したり 伸び縮みさせるプロパティの設定 それから影と拡大を組み合わせて 実は2次元なんですけども 3D風に アニメーションさせるというテクニックです そしてアニメーションする要素の初期状態を 最初に個別に変えておきます そうするとアニメーションそのものは 共通に設定してあっても バリエーションがついて見えるという事ですね それから細かいけれども3D風の表現では 重ね順を変える事が重要になります

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

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

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

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

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

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