【第1回】jQueryを使わずにCSSでエフェクトありのロールオーバーを作ってみよう!

CSSロールオーバー

jQueryを使わずにCSS3のキーフレームアニメーションを使ってエフェクト効果ありロールオーバーを作ってみます。

シリーズ1回目の今回はフェードの効果を付けるまで!

今回の目標

これが今回の制作目標です。最初に背景画像を切り替えるだけのエフェクトなしを作成し、続けてCSSアニメーションを使ってフェードしながら画像を切り替えるところまで行きます。。

OFF

※マウスを乗せると画像が切り替わります。

 

準備するもの

画像を2つ用意します。

ON OFF

 

基本のエフェクトなしバージョン

まずは、背景画像を切り替えるだけの基本のエフェクトなしバージョンから作ってみます。

※マウスを乗せると画像が切り替わります。

 

特別なことは何もしておらず、background-imageプロパティで背景画像を切り替えるだけです。

サンプルコード

 

CSSアニメーションを使いエフェクト追加

CSSのキーフレームアニメーションを使って画像をフェードさせます。CSS3のアニメーションについてはコチラをどうぞ。

OFF

※マウスを乗せると画像が切り替わります。

HTML構造の変更

背景画像の切り替えではフェードの効果を実現できません。

そのため、背景画像の上にimg要素で画像を重ねて表示して、img要素の透明度を変更することでフェードの効果を実現します。

レイヤー構造

 

サンプルコード

 

こちらの記事もどうぞ!

CSS3アニメーション

CSS3で簡単アニメーション!画像や要素を動かせる!背景色が変化する!

PR

関連記事