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'
	});
});

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

オプション

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

コマンド

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

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のデモページ
　

【参考サイト】

• Velocity.js
• Velocity.js よみほぐし – Qiita