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

アニメーションする要素を複数異なる状態で配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数の要素に共通のアニメーションを定めつつ、初めの設定を変えることで、バリエーションが加わります。
講師:
08:53

字幕

このレッスンでは 複数の要素にアニメーションを加えます その時にそれぞれの要素の最初の状態を 少しずつ変えておくことによって アニメーションに バリエーションを加えようという事です 今画面には4つの本のカードがあり 位置や角度が少しずつ違います けれどもアニメーションそのものは ポインターを合わせると 拡大して真っすぐになるという事で共通です 最初の状態を変えておくだけで アニメーションに変化が加わるという事です では実際に1つの要素がある状態から 複数の要素を配置して 少しずつ設定を変えていく事にしましょう 今DreamWeaverで開いているのは "sample2.html" という名前の 要素が1つだけのドキュメントです CSSでアニメーションが加えてあります けれども本の画像と テキストの要素は1つだけです 今現在のアニメーションが付いた状態を 確認しておきましょう "ファイル" メニューから "ブラウザーでプレビュー" します "Google Chrome" で 見てみましょう 要素が1つだけですねカードは1つだけで マウスポインターを合わせると 拡大して真っすぐになる というアニメーションは既に設定されています ではこの要素を あと3つ付け加えたいと思います 1つだけ加えられている要素については "book" と "img0" という 2つの "class" が与えられています あと3つ付け加える要素は 既にコメントの中に書いてありますので このコメントを取って有効にしましょう そして要素にはそれぞれ "book" というのは 共通のスタイルを割り当てる "class" です それに対して "img" の "1", "2", "3" という "class" これに対して個別の設定をしていきます 今現在は個別の設定は "img0" しかありませんので "style" が割り当てられていない という事ですけども では今このままの状態を 一旦確認しておきましょう ファイルを "保存" しまして "ブラウザーでプレビュー" します "Google Chrome" です 勿論こうなりますね 斜めにして影が付いて というのがありますけども 他のもの3点については まだ個別の設定がされていませんので デフォルトのまま幅も設定されていませんから 最初の1個だけしか綺麗な幅になっていません では "img" の "0" 以外の "1", "2", "3" も 設定していきましょう DreamWeaverに戻ります 要素全体は "bookshelf" という "class" の "div" 要素で囲まれています その中の "img0" がこの ".bookshelf.img0" で セレクターで設定されている訳です これを "1" や "2" や "3" についても作りたいと思いますので この設定をコピーして まずは借りてしまいましょう "コピー" します そして "ペースト" です これが "1" ですね そして "2"、"3" と 3つ作りました名前ちゃんと変えましょう "1" と "2" と "3" です もっとも設定が全く一緒ですから このまま見れば重なってしまいます とりあえず角度がありますので 角度を変えることにしましょう "0" が反時計回りマイナス8度です では "1" の方は "10"度 時計回りですね 反対方向です 今度また反時計回りに "15"度 まぁジグザグ「聞き取れない」 という感じですので ここはまたプラスにしますけども "12"度と交互に角度が 方向が変わっています これで少しだけでも 違いが分かるかと思いますので 一旦 "保存" をして "ブラウザーでプレビュー" しましょう "Google Chrome" で開きます カードが一応 後ろの方見えますね 一番前にあるのが元々あったもので その後ろにはこのカードですね 更にその後ろにはこちらです そして一番後ろにこのカードがあります ちょっと合わせにくいですね 合わさりました 更に位置を変えれば もっと見やすくなりますので 又DreamWeaverに戻って 位置を変えてみましょう 先程確認しました通り4つの要素は "bookshelf" という "class" の "" 要素で囲まれています そして "bookshelf" については このセレクターで 幅とか高さ等が設定されていますので この中で位置を調整する事にしましょう では "img" の "0" から "3" までですね ここに手を加えていきます コメントは邪魔なので消してしまいましょう そしてまずは "img0" ですね これだけ先に位置を変えてみたいと思います "bookshelf" の中で 調整をしますので 下は "bookshelf" の下に ぴったりとくっつけてしまいます "bottom" という事で これを "0px" 下にぴっちりくっつけると それから左には "left" 余白を開けましょう "100px" とします これで一旦どうなったか ブラウザーで確認したいと思います ファイルを "保存" しまして "ブラウザーでプレビュー" "Google Chrome" です この1個だけが下にさがって 左にも少し余白がつきました 勿論動きは変わっていません 後ろのカード 2枚目がちょっと見やすくなりましたね では位置が変えられる事が分かりましたので 他の3つについても同じ様に変えてみましょう DreamWeaverに戻ります まずは "img1" なんですが これはデフォルトの位置 左上のままにしておきましょう ですから位置を調整するのは "img2" からになります "top" に "50px" 余白を加えます それから "left" は "250px" 今度は "img3" ですね こちらもやはり "top" ですけども "100px" 左側には "400px" これでそれぞれの "img" つまり画像のカード 図書のカード毎に 異なる位置に設定する事が出来ましたので 確認してみましょう ファイルを一旦 "保存" して "ブラウザーでプレビュー" します それぞれバラバラな位置になりました 角度も変えてありますので ランダムに置いた様なイメージですね そしてアニメーションは共通ですので マウスポインターを重ねると 拡大して真っすぐになると 位置は元々の位置を基準にしていますけれども 最初にランダムに置いたものが拡大してくる というアニメーションが出来上がりました ちょっと気になる事があるかもしれません というのは拡大しても 手前にあるカードの前に来ないんですね これは又別のプロパティについて 学習する必要がありますので このレッスンでは作業はここまでとします このレッスンでは要素を複数加えて それぞれに対して 共通のアニメーションを与えながら 最初の状態を個別に変えてみました その場合には個別に変えたい設定に対して "class" に違う名前を付けてあげます "img3" ですね 今回要素が4つありましたので "0" から "3" まで そしてそれぞれ毎に 位置とか角度を変える事によって アニメーションの最初の状態を 変える事が出来ました

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

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

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

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

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

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