jQueryで要素をぐるぐる回す「jQuery Circulate」

jQuery Circulateは画像やテキストなどあらゆる要素をぐるぐる回すことができるJavaScriptです。
ちょっとしたギミックとしてサイトに取り入れてみてはいかがでしょうか。
jQueryで要素をぐるぐる回す「jQuery Circulate」サンプル

使用方法
jQuery Circulateからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing1.3.js"></script>
<script type="text/javascript" src="jquery.circulate.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("#id名").circulate({
speed: 2000, // アニメーション速度
height: 100, // 縦位置の移動距離
width: 400, // 水平方向の移動距離
sizeAdjustment: 40, // 縮小%(奥行き感を出せます)
loop: true, // ループさせるかどうか(true / false)
});
});
</script>

上記を記述したら、あとは回したい要素にidを付与すれば完成です。
<l;img src="画像パス" id="id名" />
また、クリックで回すなどは以下のようにJavaScriptを書き換えます。
$(document).ready( function(){
$("#button").click(function() { //buttonをクリックしたとき
if ($(this).text() == "Start") { //buttonのテキストが「Start」であれば回す
$("#id名").circulate({
loop: true,
width: 150,
height: 10
});
$(this).text("Stop"); //テキストを「Stop」にする
} else { //テキストが「Start」以外なら
$("#id名").circulate("Stop"); //止める
$(this).text("Start"); //テキストを「Start」にする
}
});
});

忘れずにbuttonを付けましょう。
<button id="button">Start</button>

jQueryで要素をぐるぐる回す「jQuery Circulate」サンプル

sponsors

「jQueryで要素をぐるぐる回す「jQuery Circulate」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryで要素をぐるぐる回す「jQuery Circulate」