サイト制作に関するメモ書き

HOME > JavaScript > jQuery > スクロール位置で要素をアニメーション表示させるjQueryプラグインを作ってみた

スクロール位置で要素をアニメーション表示させるjQueryプラグインを作ってみた

特定の位置までスクロールしたら、フェード+アニメーションで表示するプラグイン「scrollAnimateOption.js」を作りました。
パララックスサイトなどとは異なり、アニメーション処理は1度しか行われません。
「scrollAnimateOption.js」のデモページはこちら
「scrollAnimateOption.js」のダウンロード

設定方法

jQueryとscrollAnimateOption.jsを読み込みます。
easingを使いたい場合は、こちらのサイトからダウンロードして、一緒に読み込むようにしてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="scrollAnimateOption.js"></script>

HTML

<div id="sample01"><img src="./img/img01.jpg" width="200" height="140" /></div>

CSS

#sample01 {
	position: absolute;
	top: 300px;
	left: 200px;
}

CSSはposition: absolute; とtop、leftを指定して配置するようにしてください。

JavaScript

$(function(){
	$("#sample01").sao();
});

オプション

$(function(){
	$("#sample01").sao({
		point: 1000,
		ratio: 0.5,
		moveX: -50,
		moveY: -50,
		speed: 600,
		fadeSpeed: 300,
		delay: 500,
		easing: 'easeInQuad',
		callback: function() {
			// callback内容を記述
		}
	});
});
point アニメーションを開始するスクロール位置を数値で指定。
初期値は対象要素が画面下部からスクロールで表示された時。
(ページ上部から対象要素までの距離)
ratio 拡大・縮小のアニメーションをさせる時に使用。
数値で指定で、初期値は1。
拡大・縮小する軸は対象要素の中心になります。
50%縮小させた状態からアニメーションする場合は「0.5」、
150%拡大した状態からは「1.5」のように指定。
moveX X方向の移動のアニメーションをするときに使用。
数値で指定で、初期値は0。
元の位置より100px左からアニメーションを開始する場合は「-100」、
右からの場合は「100」のように指定。
moveXとmoveYの併用で斜め移動もできます。
moveY Y方向の移動のアニメーションをするときに使用します。
数値で指定で、初期値は0。
元の位置より100px上からアニメーションを開始する場合は「-100」、
下からの場合は「100」のように指定。
moveXとmoveYの併用で斜め移動もできます。
speed アニメーションするスピードの指定に使用。
数値で指定で、初期値は500。
fadeSpeed フェードインするスピードの指定に使用。
数値で指定で、初期値は500。
delay アニメーションの実行を遅らせる場合に使用。
数値で指定で、初期値は0。
pointの値が同じ要素を、タイミングをずらして動かしたい場合などに指定します。
easing easingの指定に使用します。
jquery.easing.jsを使用していない場合は、「swing」「linear」から指定。
初期値は’swing’。
easingの種類はこちらを参考に、easingの説明はこちらが参考になります。
callback アニメーション後に何か処理をする場合に使用します。
例えば、アニメーション後にアラートを出す場合は、
function(){
alert(‘turnUpのコールバックです’);
}
のように記述します。
初期値は何も設定されていません。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP