今回はCSS3でロールオーバー効果をかける方法をご紹介します。
Contents
共通HTML、CSS
HTML
<img src=”” alt=”demo” width=”240″ height=”160″ />
<div class=”lo”>
</div>
</div>
CSS赤字が今回追記した箇所になります。
width:240px;
height:160px;
position:relative;
}
.demo .lo{
width:240px;
background:rgba(255,255,255,0.5);
position:absolute;
transition: all 0.2s ease;
}
解説
transition: all 0.2s ease;
これが新しいCSS3で新しく追加されたプロパティで時間による変化を指定することができます。（hoverで指定したプロパティの値に変化します。）
transition-property（変化させるプロパティを指定）
transition-duration（変化させる時間を指定）
transition-timing-function（変化のタイミング、割合を指定（ease、linear、ease-in、ease-out、ease-in-out、3次ベジェ曲線cubic-bezier(数値, 数値, 数値, 数値)などがあります。））
transition-delay（変化が始まるまでの時間を指定）
これらをまとめて今回はtransition: all 0.2s ease;としました。
全てのプロパティを変化0.2秒かけてease（開始と完了を滑らかにする）ように変化せるよう指定しました。
下から上に
CSS赤字が今回追記した箇所になります。打ち消し線は今回なくした箇所になります。
bottom:0;
height:0;
display:none;
}
.demo#demo01:hover .lo{
height:160px;
}
解説
jqueryの時にはbottom:0;とslideToggleで下から出てくるように見せていました。
jqueryではheight:160px;display:none;としていましたが、元を0px、hoverfで160pxとし、下から出てくる動きを表現しました。
中央から上下に
CSS赤字が今回追記した箇所になります。
top:80px;
height:0;
}
.demo#demo02:hover .lo{
top:0;
height:160px;
}
解説
topを80px→0px
heightを0px→160px
2つの値を変化させることで、中央から上下に広がるように見えます。
中央から上下左右に
CSS赤字が今回追記した箇所になります。
top:80px;
left:120px;
width:0;
height:0;
}
.demo#demo03:hover .lo{
top:0;
left:0;
width:240px;
height:160px;
}
解説
topを80px→0px
heightを0px→160px
leftを120px→0px
widthを0px→160px
4つの値を変化させることで、中央から上下左右に広がるように見えます。
まとめ
jqueryのanimateで指定していた内容をスタイルシートのhover記述し、時間などを”transition”で指定してあげることで、cssでも簡単にjqueryと同じような効果が再現可能です。
jqueryに慣れている方はcss3でも同じ感覚で再現でき、とても簡単です。逆にjqueryは苦手という方でも、まずは馴染みのあるcssでの記述に慣れたら、jqueryも苦手意識なく、とりかかれるのではないでしょうか？
また、css3ではXYZ軸それぞれ回転が可能であったりと、一見万能なjqueryでも表現が難しいことが表現可能だったりします。jquery、cssにこだわらずにどちらも使えるようなれば、どんなサイト制作も怖くありません。
今回のデモでcssを操作することで、色々な見せ方ができるということが分かったかと思います。デザイナー、コーダーの方はもちろん、ディレクター、WEB制作担当者の方もちょっとした知識を持っておくと、様々なアイディアが浮かんでくるのではないでしょうか。