クリックすると。。。

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.circulate.js"></script>
<script>
    $(window).load(function(){
		$('#CirculateDemo01 div').each(function() {
			$(this).click(function() {
				$(this).circulate({
					speed: Math.floor(Math.random()*300) + 100,
					height: Math.floor(Math.random()*1000) - 470,
					width: Math.floor(Math.random()*1000) - 470
				});
			});
		});

		startBallOne();
		setTimeout(startBallTwo, 2000);
		setTimeout(startBallThree, 4000);
		function startBallOne() {
			$('#CirculateDemo02 .sphere01').circulate({
				speed: 4000,
				height: 100,
				width: -800,
				sizeAdjustment: 40,
				loop: true,
				zIndexValues: [1, 1, 3, 3]
			});
		}

		function startBallTwo() {
			$('#CirculateDemo02 .sphere02').circulate({
				speed: 4000,
				height: 120,
				width: -800,
				sizeAdjustment: 35,
				loop: true,
				zIndexValues: [2, 2, 2, 2]
			})
		}

		function startBallThree() {
			$('#CirculateDemo02 .sphere03').circulate({
				speed: 4000,
				height: 140,
				width: -800,
				sizeAdjustment: 30,
				loop: true,
				zIndexValues: [3, 3, 1, 1]
			}).fadeIn();
		}
    });
</script>
<div id="CirculateDemo01" class="Circulate-demo">
	<p class="title">クリックすると。。。</p>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div id="CirculateDemo02" class="Circulate-demo">
	<div class="sphere01"></div>
	<div class="sphere02"></div>
	<div class="sphere03"></div>
</div>

Circulateについて

Circulateは、要素をサークル状に開店させることができるプラグインです。 使い所は。。。。あなた次第
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • Flip

    Flip

    Flipは、フリップアニメーションを簡単に実装できる

  • FlipOutCards

    FlipOutCards

    複数の要素をフリップアニメーションで表示できる

  • oriDomi

    oriDomi

    画像に折り目のついた紙のような動きを与える

  • transit

    transit

    animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使える

  • kwicks

    kwicks

    スライドパネルでマウスオーバーした要素の高さ、幅をミョーンと伸ばしてくれる