マーカーネット株式会社

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

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

関連記事

CSSカラーコードを16進数からRGBに変えた理由

CSSカラーコードを16進数からRGBに変えた理由

最近コーディングをする際、特にスマフォサイトの場合は特に スタイルシートのカラーコードを16進数ではなくRGBで記述する事が増えました。 私がカラーコードにRGBを使う様になった最大の理由がRGBの場 …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

jQueryプラグイン「Colorbox」は便利ですが、 さらにWordPressプラグインとして導入すれば 設定は更に簡単になります。 ソースをいじる必要はありませんので初心者にもおすすめです。 W …