今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. 数値のカウントアップ - さまざまなフォーマットに対応「Counter-Up」

さまざまなアニメーション効果を実装「Animelt」

当ページのリンクには広告が含まれています。

スポンサーリンク

さまざまなアニメーション効果を実装するプラグイン「Animelt」を紹介します。

jQueryプラグイン「Animelt」

このプラグインを使えば、移動、回転、サイズ変更、色の変更などのアニメーション効果を簡単に実装することができます。

スポンサーリンク

デモの赤色divボックスをクリックしてみてください。アニメーション効果が楽しめます。

「Animelt」のデモ

ソース(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

スポンサーリンク

関連記事(一部広告含む)