jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる

Ads
cssやプログラミング
目次
    1. サンプル
      1. コード
      2. css
      3. HTML
    2. 解説
      1. 余談：CSS3
    3. jQueryのコードを応用するにはどうすればいいの？
    4. サンプル・2
      1. CSS
      2. HTML
    5. 結局何が言いたいの？

以前に書いたjQuery事始め、という記事の
続編のような内容の記事です。基本を理解
したら今度はコードを真似して体で覚えて
みるのも勉強方法の有効な手の一つだと
思います。ご自分で改変して遊べる程度の
簡単なコードなのでぜひチャレンジしてみて
ください。

内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基本中の基本と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。

少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェクトを作ってみます。

サンプル

まずはサンプル。画像にマウスを乗せるとアニメーションエフェクトがかかります。


確認出来ましたでしょうか。では、使用されたコードを見てみます。

コード

$(function(){
$("img.sample01").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

css

div.effe_sample {
	position: relative;
	}
 
img.sample01 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	}
 
img.sample01a {
	position: absolute;
	left: 0;
	top: 0;
	}

HTML

<div class="effe_sample">
<img src="sample01.jpg" class="sample01" />
<img src="sample01a.jpg" class="sample01a" />
</div>

解説

マウスを載せてアニメーションしながらトイフォト風のエフェクトが「かかったように見えた」と思います。コードをご覧頂くと想像付くと思いますが、単に画像2枚(sample01.jpgとsample01a.jpg)を重ねて、上に配置した画像（cssでz-indexを与えます）にマウスを乗せるとゆっくりと透過(というか、opacityが0なので見えなくなります)され、トイフォト風に加工済の画像が表示されるだけ、という仕組みです。

$("img.sample01").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},

画像（img.sample01）にマウスを乗せると（hover）、アニメーション（animate）しながら透過（”opacity”: “0”）されます。

function() {
$(this).stop().animate({"opacity": "1"}, "slow");

マウスが乗っていないときは透過しません（”opacity”: “1”）ので、上に重ねた画像が再び表示されます。

[note]画像に上手に加工を施せるデザイナーさんなら、難しいコードを覚えなくても、普段どおり画像加工すれば素敵なエフェクトを加えることが出来ますので、今あるスキルをうまく利用することも大事ですよね[/note]

余談：CSS3

この動作はjQuery不要でCSS3で実現できます。IEさえなけれb(ry

img.sample01 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	}
	img.sample01:hover{
		opacity: 0 ;
		}
 
img.sample01a {
	position: absolute;
	left: 0;
	top: 0;
	}

このようなcss3をクロスブラウザに対応させる、と言うとjQueryの良さがよく分かりますね。

jQueryのコードを応用するにはどうすればいいの？

このコードをリファレンスを見ながら好きに変更してみてください。リファレンスを見て真似てみると、より頭に入りやすいかと思います。

jQuery日本語リファレンス – animate()

アニメーションのスピードや透過、サイズの変更も出来ますのでコードを真似て、身体で覚えてみては如何でしょう。勉強し始めからリファレンスに目を通すクセを付ければ自ずと理解出来るようになるはずです。

今まで紹介されたマウスオーバーによる画像エフェクトもよくよく見てみると結構単純だったりします。

例) Create a Stunning Sliding Door Effect
例) Sliding Boxes and Captions

また、コードを全く変えずに、cssとマークアップの追加のみでも出来ることはあります。

サンプル・2

サンプル

帯が加わりました。

CSS

最初のサンプルに以下を加えました。

div.sp{
	position: absolute;
	left: 0;
	top: 0;
	display: block ;
	height: 240px ;
	width: 150px ;
	background: #000;
	z-index: 5;
	color: #fff ;
	opacity: 0.7 ;
	filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70) ;
	}
div.sp span{
	position: absolute;
	top: 50px;
	left: 20px;
	}

HTML

<div class="effe_sample">
<img src="sample01.jpg" class="sample01" />
<div class="sp"><span>サンプル</span></div><!-- ←ここが帯になる部分 -->
<img src="sample01a.jpg" class="sample01a" />
</div>

原理は変わりませんが、帯が加わっただけで印象も変わりますね。工夫次第で色々と表現出来るのではないでしょうか。

結局何が言いたいの？

jQueryを覚えたい、と言っても最初から難しいコードを学ぶ必要は無いですというお話。最近良く「覚えたいけど時間がない・・」とか「難しい」というご意見を見かけますが、そこそこ簡単なコードでもcssとHTMLも工夫すれば出来ることはかなり多くあります。

難しい事は難しいですが、jQueryに限らずなんでも基本からだと思いますので、まずは

  1. 分からなくても簡単なコードを使ってみる
  2. そのコードをリファレンスを見ながら変更してみる
  3. コードに別のコードを追加してみる
  4. 動かなかったらググる

のサイクルから初めて見ては。多くの場合は「分からなくても簡単なコードを使ってみる（コピペ）」→「動いたからOK」で終わってしまっていたと思うのですが、その次の行動をするだけで大きく変わってくるかと思います。（※と、僕は信じて勉強中です）

その肝心のコードサンプルなんですが、前回の記事でご紹介した書籍を購入してもいいですし、Webクリエイターボックスさんが少ないjQueryのコードサンプルを記事にしてくれていますので参考にしてみては如何でしょう。

ホーム
トップ
タイトルとURLをコピーしました