HTML要素をぐるぐる立体的に回転「Vortex」
当ページのリンクには広告が含まれています。
スポンサーリンク
HTML要素をぐるぐる立体的に回転させるプラグイン「Vortex」を紹介します。
jQueryプラグイン「Vortex」
このプラグインを使えば、指定した要素を立体的(奥行きをもった3D）に、楕円状にぐるぐる回すことができます。
オプションではスピード・奥行き・回転方向……などを指定することができます。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Vortex のデモでーす。">
<title>Vortex - jQueryプラグイン</title>
<style>
#vortex {
width: 600px;
height: 300px;
position: relative;
}
.demo {
width: 20px;
height: 20px;
border: solid 1px red;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>Vortex のデモです。</h1>
<div id="vortex">
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/jquery.vortex.js'></script>
<script>
$(window).load(function() {
$('#vortex').vortex({
initialPosition: 270,
speed: 500
});
});
</script>
</body>
</html>
スポンサーリンク