about

sogo  
fukidasi

  social

Count per Day

  • 85244現在の記事:
  • 433今日の閲覧数:
  • 1現在オンライン中の人数:

プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ

ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。




マウスオーバーアニメーションの種類



オンマウスで画像を切り替えるアニメーション

フェイドさせながらテキスト色を変化させるアニメーション

フェイドさせながら背景色を変化させるアニメーション

テキスト(画像)を横にピコッとずらすアニメーション

画像をボワ~と大きく変化させるアニメーション

画像を右から左へスライドさせ入れ替えるアニメーション

画像をクルッと縦に回転させるアニメーション


※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。




オンマウスで画像を切り替えるアニメーション



DEMO ⇓






1. 事前に画像を準備する

画像をマウスオーバーで動かす為には、もちろん2枚の画像(元画像と変更画像)を用意するのですが、その際に、画像のファイル名の後に_offと_onをそれぞれの画像に付けておきます。

具体的に説明しますと、仮にファイル名を「sakura」とした場合、マウスオーバーさせる前のデフォルト画像をsakura_off.jpg、マウスオーバー時に変更させる画像をsakura_on.jpg としてアップロードしておきます。

※off/onの画像それぞれの拡張子は共通(例:.jpgや.png)にしておく必要があります。


2. Script
$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});


3. HTML
<a href="#">
     <img src="images/sakura_off.jpg" alt="さくら" border="0" />
</a>


※追記
上記方法ですとどうしても切替時のタイムラグが発生してしまいますが、よりスムーズに画像を切り替えるjQueryプラグインを使う方法をこちらで書いておりますのでご欄下さい。





フェイドさせながらテキスト色を変化させるアニメーション



DEMO ⇓


テキストがアニメーションしながらカラー変化していく



1. Script
$(document).ready(function(){
				$("a").hover(function() {
                $(this).stop().animate({color: "#0096c1"}, 800);//ONマウス時のカラーと速度
                },function() {
                $(this).stop().animate({color: "#111" }, 800);//OFFマウス時のカラーと速度
                });
 });

上記Script上では、a属性を一括指定していますので、基本的にHTMLは不要ですが、用途によって属性を変更して使用して下さい。





テキスト(画像)を横にピコッとずらすアニメーション



DEMO ⇓




1. Script
$(document).ready(function(){
				$('.class名').hover(function() {
                $(this).stop().animate({'marginLeft':'3px'}, 300);//左を3px空ける事でテキストを右にずらす
                },function() {
                $(this).stop().animate({'marginLeft':'0px'}, 300);
                });
});


2. HTML
<div class="class名">
     <a href="#">テキスト</a>
</div>





フェイドさせながら背景色を変化させるアニメーション



DEMO ⇓




1. Script
$(document).ready(function(){
	$(".class名").hover(function() {
             $(this).stop().animate({ backgroundColor: "#ffcd00"}, 900);//ONマウス時の背景色
             },function() {
             $(this).stop().animate({ backgroundColor: "#fff" }, 900);//OFFマウス時の背景色
             });
});


2. HTML
<div class="class名">
          <a href="#">テキスト</a>
</div>


3.CSS
マウスオーバー前の背景色、paddingやfont-sizeをCSSで付与します
.ID名 {
  background: #fff;/* 背景色を白にする場合 */
  padding: 20px 35px;
  font-size: 14px;
}




画像をボワ~と大きく変化させるアニメーション



DEMO ⇓





1. 事前に画像を準備する

DEMOでは、デフォルトで400px×90px、拡大で600px×135pxで表示させていますので、そのサイズを仮定して説明していきます。

小さな画像を拡大させると、どうしても画像が荒くなってしまうので、ここでは大きな画像を一枚用意します。そこで用意したのが下の600×135pxの画像です。



この大きな画像をデフォルトでは小さく表示させておき、オンマウスで元々のサイズで表示させる事で、画像がさも拡大したかのように見せるというアニメーションです。

*拡大サイズとデフォルトサイズの縦横の比率を考えてデフォルトサイズを設定します。


2. Script
$(function() {
	$('#demo img')
	.hover(
		function(){
			$(this).stop().animate({
				'width':'600px',//拡大で表示させておくサイズ
				'height':'135px',
				'marginTop':'-45px'//トップのマージンをマイナスで指定す事で底辺を起点としています
			},'fast');
		},
		function () {
			$(this).stop().animate({
				'width':'400px',//デフォルトで表示させておくサイズ
				'height':'90px',
				'marginTop':'0px'
			},'fast');
		}
	);
});


3. HTML
<dl id="demo">
	<dt><img src="/images/画像.jpg" width="400" height="90" alt="demo" border="0" /></dt>
</dl>




画像を右から左へスライドさせ入れ替えるアニメーション



DEMO ⇓


demo




1. 事前に画像を準備する

DEMOでは、540px×60pxで表示させていますので、そのサイズを仮定して説明します。
ここでは、540px×60pxで作成した画像2枚を横に連結させ、横1080px1枚に作成します。


(スペースの関係で540pxで表示されていますが実際は1080pxです)



2. Script
$(function() {
	$('#demo img')
	.hover(
		function(){
			$(this).stop().animate({'marginLeft':'-540px'},'normal');
		},
		function () {
			$(this).stop().animate({'marginLeft':'-0px'},'normal');
		}
	);
});


3. HTML
<dl id="demo">
     <dt><img src="/images/画像.jpg" width="1080" height="60" alt="demo" border="0" /></dt>
    </dl>

(幅(width)は最大時のサイズを指定します)



4.CSS
横幅540px以上はみ出す部分を表示させない為にCSSを付与します

dl#demo {
	float: left;
	width: 540px;
	height: 60px;
	overflow: hidden !important;
}

理屈は簡単ですね、普段は画像の右半分を隠してマージンを動かすことによって、さも右から新しい画像が出てきたように見せるアニメーションです。




画像をクルッと縦に回転させるアニメーション



DEMO ⇓


demo6




1. 事前に画像を準備する


DEMOでは、540px×60pxで表示させていますので、そのサイズを仮定して説明します。
ここでは、540px×60pxで作成した画像2枚を縦に連結させ、高さ120px1枚に作成します。





2. Script
$(function() {
	$('#demo img')
	.hover(
		function(){
			$(this).stop().animate({'marginTop':'-60px'},'normal');
		},
		function () {
			$(this).stop().animate({'marginTop':'-0px'},'normal');
		}
	);
});


3.HTML
<dl id="demo">
     <dt><img src="/images/画像.jpg" width="540" height="120" alt="demo" border="0" /></dt>
    </dl>

(height(高さ)は最大時のサイズを指定します)



4. CSS
縦60px以上はみ出す部分を表示させない為にCSSを付与します

dl#demo {
	float: left;
	width: 540px;
	height: 60px;
	overflow: hidden !important;
}

こちらも理屈は簡単で、普段は画像の下半分を隠してマージンを動かすことによって、さも下から新しい画像が出てきたように見せるアニメーションです。


以上のように、プラグインを使わなくても簡単に実装できるjQueryコードを並べてみましたが、Script、HTML、CSSはあくまでも私の環境において属性を指定しております。お使いになる際は、ご自身の環境に合わせ適所に改変なり追記をしてお使い下さい。



やさしくはじめるWebデザイナーのためのjQueryの学校


Pocket

  • プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | Mlog(エムログ) http://t.co/ypjx45G2 @mina_s7さんから

  • マウスオーバーで画像拡大。起点を左下以外の参考

  • […] プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび […]

  • 超使える!!あった。フェイドさせながら背景色を変化させるアニメーション

  • jQueryマウスオーバーアニメーションまとめ

  • […] その他調べてみたらいろいろなアクションがありましたので こちらも参考にしてみてください。 プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ […]

  • 12時間頑張りましたが、テキストがアニメーションしながらカラー変化していくのanimateに限り、上手く動きません。
    他のものは、動きました。

    このページのソースを全部拝借させていただいた所、
    jqueryではなく、css3によりテキストのカラー変化ができているようです。

    つまり、jqueryによる動作ではありませんでした。
    どうやら、animateにCSSを適用させる場合、#000000などの数値は実装できないようです。
    特殊な対策が必要なようです。

    そこで、自分なりの対策として、
    http://code.jquery.com/jquery-1.11.0.min.js と、
    http://plugins.jquery.com/color/ から、
    DLして、自分のHPに設置し、動作テストしました。

    結果・・・
    残念!それでも、動きませんでした。
    htmlもあってるはずです。

    悔しいですが、jqueryではんく、CSS3での実装にしました。
    結果論的には、動きは変わりませんので。

    ちなみに、他のページには、テキストが変わるanimateが、分かりやすく掲載されているサイトは、僕の検索する限り見受けられませんでした。
    このサイトは分かりやすく、シンプルに解説してあり、大変役立っております。
    ありがとうございます!

    他の方で、僕のように悪戦苦闘している方のアドバイスになれば、幸いです。

    もし、
    テキストがアニメーションしながらカラー変化していく
    animateのjqueryが動く、html,jqueryサンプルあれば、ご教授願えませんでしょうか?

    よろしくお願いします。

  • jQueryマウスオーバーアニメーションのまとめ。

  • どれも動きがなめらかでかわいい!!

  • […] 今回、参考にさせていただいたのは、 『プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ – NEET-NAVI』さんです。 […]

  • 使うかどうかわかんないけど可愛いのでブックマーク(^◇^)

  • これ使おう。

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。