マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS javascript(jquery)

超簡単!【CSS3】ロールオーバー効果

投稿日:2015年1月5日 更新日:

超簡単!【jQuery】ロールオーバー効果
こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果をかける方法をご紹介します。

共通HTML、CSS

HTML

<div class=”demo” id=”demo01″>
   <img src=”” alt=”demo” width=”240″ height=”160″ />
   <div class=”lo”>
   </div>
</div>

CSS赤字が今回追記した箇所になります。

.demo{
   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(開始と完了を滑らかにする)ように変化せるよう指定しました。

下から上に

demo

CSS赤字が今回追記した箇所になります。打ち消し線は今回なくした箇所になります。

.demo#demo01 .lo{
   bottom:0;
   height:0;
   display:none;
}
.demo#demo01:hover .lo{
   height:160px;
}

解説

jqueryの時にはbottom:0;とslideToggleで下から出てくるように見せていました。
jqueryではheight:160px;display:none;としていましたが、元を0px、hoverfで160pxとし、下から出てくる動きを表現しました。

中央から上下に

demo

CSS赤字が今回追記した箇所になります。

.demo#demo02 .lo{
   top:80px;
   height:0;
}
.demo#demo02:hover .lo{
   top:0;
   height:160px;
}

解説

topを80px→0px
heightを0px→160px
2つの値を変化させることで、中央から上下に広がるように見えます。

中央から上下左右に

demo

CSS赤字が今回追記した箇所になります。

.demo#demo03 .lo{
   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制作担当者の方もちょっとした知識を持っておくと、様々なアイディアが浮かんでくるのではないでしょうか。

-CSS, javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …