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

HOME > JavaScript > jQuery > Velocity.jsを使ってみる

Velocity.jsを使ってみる

スムーズなアニメーションを実装できるjQueryのプラグイン「Velocity.js」の使い方をメモ。

使い方

下記からダウンロードできます。
GitHub – julianshapiro/velocity: Accelerated JavaScript animation.

HTML内に必要なファイルを読み込みます。

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

HTML

#sampleを動かしてみます。

<div id="sample"></div>

CSS

#sample {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 50px;
	height: 50px;
	background: #ff0000;
}

JavaScript

jQueryのanimate()に近い形で記述ができます。

$(function() {
	$('#sample').velocity({
		top: 200,
		left: 100,
		width: 200,
		height: 100,
		backgroundColor: '#0000ff'
	});
});

Velocity.jsのデモページ

jQueryを読み込まないで使用することもでき、以下のように記述して使用します。

JavaScript

var sample = document.getElementById('sample');
Velocity(sample, {
	top: 200,
	left: 100,
	width: 200,
	height: 100,
	backgroundColor: '#0000ff'
});

jQueryを使わない場合のデモページ
jQuery使用時はIE8からサポートしていますが、使用しない場合はIE8がサポートから外れます。

Velocity.jsはjQueryのanimate()のようにつなげて記述することもできます。

JavaScript

$(function() {
	$('#sample').velocity({
		top: 200,
		left: 100,
		width: 200,
		height: 100,
		backgroundColor: '#0000ff'
	}).velocity({
		width: 300
	}).delay(500).velocity({
		top: 50,
		left: 50,
		width: 50,
		height: 50,
		backgroundColor: '#00ff00'
	});
});

つなげて記述した場合のデモページ
 

オプション

オプション設定のデモページはこちら。
オプションについて詳しくは公式サイトのオプション項目をご確認ください。

duration アニメーションする時間を設定。
値は数値または’slow’, ‘normal’, ‘fast’で、初期値は400。
easing イージングの設定。
初期値は’swing’。
queue キューの設定(queueのデモはこちら)。初期値は”。
既にアニメーション中の要素をアニメーションしたい場合、falseを指定する。
キューの名前を指定した場合、その場では実行されず、$element.dequeue(‘queueName’)で後から実行できる。
begin アニメーション開始時に実行。
初期値はundefined。
progress アニメーション中に実行して、進捗率などを返す。
プロパティにtweenを設定しておくことで、別途値を取得できる。
デモのサンプルコード参照。
complete アニメーション終了時に実行。
初期値はundefined。
display アニメーション時のdisplayに関する設定(デモページはこちら)。
初期値はundefined。
visibility アニメーション時のvisibilityに関する設定(デモページはこちら)。
初期値はundefined。
loop アニメーションの繰り返しを設定。
数値はその回数、falseは繰り返しなし、trueは永遠に繰り返し。
初期値はfalse。
delay アニメーション開始時とループ時の待ち時間の設定。
初期値はfalse。
mobileHA モバイルでのアニメーション方法の設定。
初期値はtrue。

 

コマンド

コマンド設定のデモページはこちら。
オプションについて詳しくは公式サイトのコマンド項目をご確認ください。

fadeOut・fadeIn フェードアウト・フェードインする。
slideUp・slideDown スライドアップ・スライドインする。
scroll 指定した要素までスクロールする(デモページはこちら)。
特定の要素内で実行する場合は、オプションにcontainerを指定する。
スクロールする方向を指定する場合は、オプションにaxisを指定する(初期値はy)。
スクロールする位置を要素からずらしたい場合は、オプションにoffsetを指定する。
stop 現在実行中のキューを途中で停止する。
reverse アニメーションを逆方向に実行する。
finish アニメーション完了時までスキップする。

 

transform

CSS3のtransformのアニメーションも実行できます。
設定できるプロパティは公式サイトのCSS Support項目をご確認ください。

HTML

<button id="scale">scale</button>
<button id="translate">translate</button>
<button id="rotate">rotate</button>
<button id="skew">skew</button>
<div id="sample6"></div>
<div id="sample"></div>

JavaScript

$(function() {
	$('#scale').click(function() {
		$('#sample6').velocity({
			scaleX: 1.5
		}).velocity({
			scaleY: 1.5
		}).velocity({
			scaleX: 1,
			scaleY: 1
		});
	});
	$('#translate').click(function() {
		$('#sample6').velocity({
			translateX: 150,
			translateY: 200
		}).velocity({
			translateX: 0,
			translateY: 0
		});
	});
	$('#rotate').click(function() {
		$('#sample6').velocity({
			rotateX: '180deg'
		}).velocity({
			rotateY: '180deg'
		}).velocity({
			rotateX: '0deg',
			rotateY: '0deg'
		});
	});
	$('#skew').click(function() {
		$('#sample6').velocity({
			skewX: '30deg'
		}).velocity({
			skewY: '30deg'
		}).velocity({
			skewX: '0deg',
			skewY: '0deg'
		});
	});
});

transformのデモページ
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP