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

Web開発におけるユーザー体験を向上させるために、ページ表示時のアニメーションは効果的な手法の一つです。特に、視覚的に訴える要素を取り入れたアニメーションは、ユーザーの注意を引き、直感的な操作を促進します。本記事では、jQueryを使用し、ページ表示時に画像を一瞬だけ表示しつつ、イージング（緩急）を効かせたアニメーションの実装方法について解説します。

Contents

jQueryとイージングとは？
- jQueryとは
- イージングとは？
実際のコード例
jQueryアニメーションにイージングをつけて画像をチラッと表示のデモ
jquery.easing.1.3.jsプラグインソース元

jQueryとイージングとは？

jQueryとは

まず、jQueryとは、JavaScriptのライブラリであり、Webページの操作を簡素化するために広く利用されています。初心者でも比較的簡単に利用できるため、多くの開発者にとって親しみのあるツールです。jQueryは、要素の操作やアニメーションの実装、イベントハンドリングなどを簡潔に記述できるため、Web開発において大変便利です。

イージングとは？

次に、イージングについて説明します。アニメーションの際に動きに緩急をつける技術で、自然な動きを実現するための手法です。例えば、動きが最初はゆっくり始まり、途中で加速し、最後にまたゆっくりと止まる、というような効果を与えます。この動きは、単に線形的にアニメーションを行う場合と比べ、より視覚的に心地よく、リアルな印象を与えることができます。特に、ボタンやメニューの表示・非表示の演出に使用すると、ユーザーにとってスムーズで直感的な操作感を提供できます。

本記事では、jQuery.easing.1.3.jsというプラグインを使用して、ページ表示時に画像をアニメーションで一時的に表示し、一定時間後に再び非表示にする処理を実装します。このイージング効果により、アニメーションの動きに自然な緩急を与え、ユーザーにとって心地よい体験を提供します。

実際のコード例

必要なファイルの読み込みとJavaScriptの記述

まず、jquery.min.js（バージョン1.6.2）とjquery.easing.1.3.jsを読み込みます。これにより、jQueryの基本機能に加え、イージング効果を実現するための拡張機能を利用できるようになります。

次に、ページが表示された際に画像を表示するための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>

このコードでは、まずanime01という関数を使って、画像を指定された位置にアニメーションで表示します。その後、一定時間が経過した後に、画像を再び非表示にする処理を行います。また、マウスオーバー時に再度画像が表示され、マウスアウト時に非表示に戻る動きも実装されています。これにより、ページを訪れたユーザーに動的な視覚効果を提供し、インタラクティブな体験を向上させます。

CSSによるスタイル設定

次に、画像を正確に表示するためのCSSコードを紹介します。このコードでは、デフォルトで画像をブラウザの外側に隠し、アニメーションのタイミングで表示されるように設定しています。

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

ここでは、画像が初期状態でブラウザの外に隠れていることがわかります。また、topプロパティを使用して、画像がブラウザの外に隠れるように設定しています。このプロパティは、JavaScriptによるアニメーションで操作され、イージングを効かせて画像を表示・非表示にします。

HTML構造

次に、実際に画像を配置する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>

このHTML構造では、idLogo01というIDを持つ画像エリアがアニメーションの対象となります。この画像エリアに対して、先ほど紹介したJavaScriptとCSSを組み合わせることで、ページ表示時にイージングを効かせたアニメーションを実現します。