Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

ホームページ制作に役立つ情報を東京・池袋のWebクリエイターが配信!
  1. ホーム > 
  2. jQuery/JavaScript > 
  3. 簡単にホームページが豪華に見えるJQuery
imgres

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

  • 2014.06.10(Tue)
  • jQuery/JavaScript
  • , , ,

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

animateの引数説明

queue

trueを指定すると複数のアニメーションを順番に実行します。
falseを指定すると複数のアニメーションを同時に実行します。

duration

アニメーションの速度です。
‘slow’、’normal’、’fast’、またはミリ秒単位(つまり1000で1秒)の数字を入れられます。

easing

アニメーションに加速・減速をつけます。
初期状態では’linear’と’swing’のみですが、プラグインを読ませることによって数が増えます。(jquery.easing.js
linerは加速・減速なし。
swingは加速して、減速。(大体はこれで用は足ります)


ページの先頭へ