SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.01.28
  • CATEGORY
TITLE

【jQuery】マウスオーバー時の画像エフェクト サンプルあり

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
んばんはー今日は【jQuery】マウスオーバー時の画像エフェクトについて
勉強していきましょう!

マウスオーバー(フェードイン/アウト)

1
index.htmlファイルを作成しよう

HTMLのhead要素内に、「style.css」、「JavaScript」ファイルを読み込んでおきます。

HTMLファイル
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>


</body>
</html>
2
画像の用意し配置します

画像サイズ「360×300」を用意します。
今回はdivタグでimgタグを囲いマウスオーバーした際に、カーソルを矢印から指マークに変えるために「cursor:pointer」の設定をおこないます。


画像サイズ「360×300」
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>
.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
}
3
index.htmlにjQueryを記述します

基本となるマウスオーバーとマウスアウトをhover()イベントを使って設定します。

<script type="text/javascript">
$(function () {
  $(".thumbnail").hover(function () {
	  //マウスオーバーしたときの処理
  },function () {
	  //マウスアウトしたときの処理
  });
});
</script>
4
スクリプトを追加し、画像にエフェクトを設定します

マウスオーバー時に画像が半透明になり、マウスアウト時に元に戻る設定をおこないます。
1「animate()」で画像を半透明(opacityプロパティを0.5)にアニメーションをさせます。

第2引数の”fast”はアニメーションのスピードを指定します。
animate()の前のstep()は、マウスオーバー/アウトを素早く繰り返したときに、マウスオーバーした時点で別の
アニメーションが進行中だった場合、
そのアニメーションを中断し、stop()の後のanimate()を実行します。

2animate()で画像を元の状態に戻します。(opacityプロパティを1)に設定します。

<script type="text/javascript">
$(function () {
  $(".thumbnail").hover(function () {
	  //マウスオーバーしたときの処理
	  $(this).stop().animate({opacity:0.5},"fast");
  },function () {
	  //マウスアウトしたときの処理
	   $(this).stop().animate({opacity:1},"fast");
  });
});
</script>	

See the Pen
OJPGGvN
by shu (@shu0325)
on CodePen.

2つの画像を使ったエフェクト

1
同じサイズの画像を用意します

今回は2つの画像を用意し、先ほど使用したCSSを使います。


画像サイズ「360×300」
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>
.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
	background: url("images/hover_img") no-repeat;
}
2
スクリプトを変更します。

スクリプトを変更し、画像にマウスオーバーしたときに、「opacity:0」にし、
マウスアウトしたときに「opacity:1」にアニメーションをさせます。

 

変更点:背景画像はフェードイン/アウトさせたくないので、
ターゲットが前面画像のimg要素になるよう、「$(“img” , this)」に変更します。

See the Pen
dyPERqd
by shu (@shu0325)
on CodePen.

画像を使いスライドさせるエフェクト

1
使用する画像を用意します

今回は、1つの画像をスライドさせるエフェクトさせる方法です。


画像サイズ「720×300」
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>
.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
	overflow: hidden;
}

「overflow: hidden;」を使用しボックスに収まらない部分を非表示にしましょう。

2
スクリプトを変更します。

マウスオーバーしたときに、animate()でmargin-left: -300px;に設定します。
スタート地が-300px、マウスオーバーした際に0に戻る設定です。

	<script type="text/javascript">
		$(function () {
			$(".thumbnail").hover(function () {
				$("img", this).stop().animate({marginLeft:"-360px"},"fast");
			},function () {
				$("img", this).stop().animate({marginLeft:"0px"},"fast");
			});
		});
	</script>

See the Pen
YzPbxxg
by shu (@shu0325)
on CodePen.

まとめ

今回はこれで以上です。
私もjQueryは苦手ですが、実際にこうやってアニメーションができると楽しいですよね!

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top