ホーム >
jQuery/JavaScript >
簡単にホームページが豪華に見えるJQuery

簡単にホームページが豪華に見えるJQuery

JQueryってうまく使うととてもホームページが豪華に見えますよね。ただ、凝っていればいるほど、JQueryも難しくなっていくので、時間や費用とにらめっこすると導入を諦める・・・なんてこともあります。でも、ほんのちょっとの手間でもできるJQueryでも、十分ホームページは豪華に見えますので、サービスくらいの気持ちで導入できるものをご紹介。

画像や要素をフェードイン

画像のフェードインさせます。
シンプルですけど、うまく使えばすごく綺麗になると思います。
ページ全体に使用すれば、ページがふわっとでてくるようにも見えますね。
まずCSSにopacityで透過にしておきましょう。

【CSS】

#sample01{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

次に、JSで以下のように書くとフェードインしてきます。

【JS】

$(function(){
	$("#sample01").animate({opacity:'1'},{queue:false,duration: 800,easing:'swing'});
});

これをいくつか作って、時間差で表示させたい時は「setTimeout」というのを使えば時間差で表示していきます。

【CSS】

#sample01,#sample02,#sample03{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

CSSとJSの透過の記述を逆にすればフェードアウトになりますね。

【JS】

$(function(){
	setTimeout(function(){$("#sample01").animate({opacity:'1'},{queue:false,duration: 800,easing:'swing'});}, 0);
	setTimeout(function(){$("#sample02").animate({opacity:'1'},{queue:false,duration: 800,easing:'swing'});}, 1000);
	setTimeout(function(){$("#sample03").animate({opacity:'1'},{queue:false,duration: 800,easing:'swing'});}, 2000);

});

画像や要素の点滅

画像のフェードイン・フェードアウトを繰り返します。
キラキラを表現したい場合には良いかもしれません。

【JS】

$(function(){
	setInterval(function(){
		$('#sample').fadeOut(500,function(){$(this).fadeIn(500)});
	},1000);
});

画像や要素の移動

画像や要素を移動させます。
個人的にフェードイン等と併用するのが結構好きですね。

【CSS】

#sample01{
	position:absolute;
	top:0px;
	left:0px;
	z-index:9999;
}

【JS】

$(function(){
	$("#sample01").animate({top:'100px',left:'100px'},{queue:false,duration: 800,easing:'swing'});
});

こちらももちろん、setTimeoutを使って時間差で複数表示することができます。

【CSS】

#sample01,#sample02,#sample03{
	position:absolute;
	top:0px;
	left:0px;
	z-index:9999;
}

【JS】

$(function(){
	setTimeout(function(){$("#sample01").animate({top:'100px',left:'100px'},{queue:false,duration: 800,easing:'swing'});}, 0);
	setTimeout(function(){$("#sample02").animate({top:'200px',left:'200px'},{queue:false,duration: 800,easing:'swing'});}, 1000);
	setTimeout(function(){$("#sample03").animate({top:'300px',left:'300px'},{queue:false,duration: 800,easing:'swing'});}, 2000);

});

上記のようにJQueryのanimateというのは、記述した動きを実行するので、フェードイン・フェードアウト、画像や要素の移動・点滅など、いろんな動きができて面白いんです。
あとは発想さえあれば、結構簡単に動きのあるものを作れるとおもいますよ。