JavaScript

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

  /

jquery.easing.1.3.jsを使ってページ表示時に画像をチラッと表示させかつ動きにイージング（緩急）をつけて表示させる方法をご紹介します。

Contents
  1. jquery.easing.1.3.jsを使って、ページ表示時に画像をチラッと表示させかつ動きにイージング（緩急）をつけて表示させるJavaScriptの記述
  2. jqueryアニメーションにイージングをつけて画像をチラッと表示するCSSの記述
  3. jqueryアニメーションにイージングをつけて画像をチラッと表示するHTMLの記述
  4. jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ
  5. jquery.easing.1.3.jsプラグインソース元

jquery.easing.1.3.jsを使って、ページ表示時に画像をチラッと表示させかつ動きにイージング（緩急）をつけて表示させるJavaScriptの記述

※jquery.min.js（v1.6.2）、jquery.easing.1.3.jsファイルを読み込みます。ページ表示時に画像をアニメーションでブラウザ内にチラッと表示させ、数秒後にブラウザ外に隠れる動きにしてます。

<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>

jqueryアニメーションにイージングをつけて画像をチラッと表示するCSSの記述

※デフォルトは画像（#idHeader #idLogo01）をブラウザ外に表示される様に設定してます。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	padding:15px 0 0 0;
}
p{
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
}
#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>

jqueryアニメーションにイージングをつけて画像をチラッと表示するHTMLの記述

※画像エリア（id=”idLogo01″）を用意します。必要に応じて変更して下さい。

<div id="idWrap">
	<div id="idHeader">
		<div id="idLogo01"><a href="/" title="DAD UNION" target="_blank"><img src="logo01.jpg" width="80" alt="DAD UNION" border="0" /></a></div>
	</div>

	<h1>上記にてロゴ画像がイージングつきアニメーションでチラッと表示されます。</h1>
    <p>初期表示時は一旦ロゴ画像が出て表示され、<br>
    ブラウザ外に隠れますのでマウスオーバーで出てきます。<br>
    マウスアウトでまた隠れます。</p>

</div>

jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ

jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ

jquery.easing.1.3.jsプラグインソース元

jquery.easing.1.3.jsプラグインソース元：jQuery Easing Plugin (version 1.3)
Easingエフェクトの種類：Easing/jQuery

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

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

アニメーション jquery.easing イージング animation
RELATED POST