さまざまなアニメーション効果を実装「Animelt」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまなアニメーション効果を実装するプラグイン「Animelt」を紹介します。
jQueryプラグイン「Animelt」
このプラグインを使えば、移動、回転、サイズ変更、色の変更などのアニメーション効果を簡単に実装することができます。
スポンサーリンク
デモの赤色divボックスをクリックしてみてください。アニメーション効果が楽しめます。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Animelt - jQueryプラグインまとめのカルマ</title>
</head>
<style>
#demo {
width: 100px;
height: 100px;
background-color:red;
position:relative;
}
</style>
<body>
<h1>Animeltのデモでーす。</h1>
<p>↓ クリックしてみてください。</p>
<div id="demo"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="animelt.js"></script>
<script>
$("#demo").click(function(){
$( this ).animelt({
transform: "rotateY(1080deg)",
top: "200px",
left: "400px",
width: "500px",
height: "500px",
background: "purple"
}, 2000)
});
</script>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Animelt
スポンサーリンク