UNIRRY

WEBデザインとホロスコープと宇宙のブログ

いちばん手間いらずなオンマウス!半透明で表現するjs

mouseover1

マウスオーバーの時のエフェクトっていろいろありますが、かんたんに作れるものから、これいいね!ってプラグインなどを徐々に紹介していきたいと思います。なんだったら自分でも新しい表現方法を考えていけたらいい気がします。どうせだし、どうせやることこれですし、おすし。

まずはいちばん手間いらずなやつ!(ババァーン!)
オンマウスで半透明にする

これは透明度をかえることでオンマウスを表現します。白背景とかでやるときれいに見えると思いますが、くっきりした色のページだとあんまり見た目いい感じではなくなってしまいます(透明になった感がありすぎたり、色が混ざって汚くなったりしますんでね)。
オンマウス画像を作らなくていいため画像一個でオンとオフきりかえられるのがいいとこです^▽^デザインにもコーディングにも優しいです。

js部分(アニメーション版):jQuery

// バナーマウスオン時の透明度をアニメーションさせる 200はアニメーションのスピード
$("ul#bnlist li").hover(function(){
            $(this).find("img").animate( { opacity: 0.6 }, 200 );
}, function(){
            $(this).find("img").animate( { opacity: 1 }, 200 );
});

html部分

<ul id="bnlist">
  <li><img src="aaaaa.jpg"></li>
  <li><img src="bbbbb.jpg"></li>
</ul>

あとあれです、jpgとgifでやるのがいいです。pngだと透明度をアニメーションで変えたとき、IE系でアニメーション中透明部分が黒くなるっていう現象がおきたりします。OSによるところもありそうなので、そのうち改善されていくかもですが。

アニメーションさせずに、パキっと透明度を変えたい場合は、cssを操作させるだけに変更します。

js部分(アニメーションなし版):jQuery

// バナーマウスオン時の透明度を単純に切り替える
$("ul#bnlist li").hover(function(){
            $(this).find("img").css( { opacity: "0.2" } );
}, function(){
            $(this).find("img").css( { opacity: "1" } );
});

オンマウスの表現は、ほかには、ちょっと浮かせるだとか、画像の名前を切り替えるだとか(これはめっちゃよくあるやつですね)、なんか上にdivをかぶせるだとか(デザイン重視サイトでよくみる気がする)、回転させるだとか、ありますね。
徐々に紹介していきま~す。CSS3とかを使うともっといっぱいできそうです。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3