jquery.easing:アニメーションにイージングをつけて画像をチラッと表示



ページ表示時に画像をチラッと表示させ、
かつ動きに緩急(easing)をつけて表示させてみました。
(何かどこかでありそうなちょっとした動きにしてるつもりですが)

1.JavaScriptの記述

ロゴ画像を初期表示時はアニメーションでブラウザ内にチラッと表示させ、
数秒後にブラウザ外に隠れる動きにしてます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
mode=1;

setTimeout("anime01()",500);

function anime02(){
	$(function(){
		$("#idLogo01").hover(function(){
			$(this).stop().animate({top:'0px'}, 600,'easeInOutCubic');
		},
		function(){
			$(this).stop().animate({top:'-70px'}, 600,'easeInOutCubic');
		});

	});
}

function mcheck(){
	if(mode==2){clearInterval("tid");anime02();}
}

function anime01() {	
	var openDelay = 500;
	var closeDelay = 2700;
	
	setTimeout(function(){$("#idLogo01").animate({top:'0px'}, 1000,'easeInOutCubic');}, openDelay);
	setTimeout(function(){$("#idLogo01").animate({top:'-70px'}, 600,'easeInOutCubic');}, closeDelay);
	mode=2;
	
	return;
}

tid=setInterval("mcheck()",3000);
</script>

 

2.CSSの記述

デフォルトはロゴ画像をブラウザ外に
表示される様に設定してます。

<style type="text/css">
<!--
#idHeader{
	width:70px;
	margin:0 auto;
}
#idHeader a img{
	position:relative;
	z-index:10;
}
#idHeader #idLogo01{
	position:relative;
	top:-70px;
	cursor:pointer;
}
#idHeader #idLogo01 img{
	z-index:1;
	position:relative;
}
-->
</style>

 

3.HTMLの記述

<div id="idWrap">
	<div id="idHeader">
		<div id="idLogo01"><a href="/" title="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" target="_blank"><img src="logo01.jpg" width="70" height="87" alt="BLINDER HIDDEN" border="0" /></a></div>
	</div>
</div>

 
jquery.easing.1.3.jsプラグイン元:jQuery Easing Plugin (version 1.3)
Easingエフェクトの種類:Easing/jQuery
 
jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ
 

Flashを使用した演出のサイトをjQueryアニメーションを使って演出ってことを
いくつかやってきましたが、Flashのノリで演出をコロコロ変えてリクエストされると
ついていけないあるある。