Roundabout Shapes


Description: その場でカルーセルを実装するプラグインです。クリックで回転します。表示はcssの調整が必要ですが、IE6でも7でも動くクロスブラウザ対応です。プロダクトのアピールなんかにも良さそうですね。要jquery.easing
Sample: demo
Tutorial: Roundabout Shapes for jQuery
License: BSD

Sample

  • 最初に表示する部分です

    ここが表示されます


    両脇をキリックすると
    回転します

  • 1です

  • 2です

  • 3です

  • 4です

Note

$(document).ready(function() {
	// top example
	$('.roundabout-example ul').roundabout({
		'easing': 'easeOutExpo',
		'duration': 500,
		'btnNext': '.next',
		'btnPrev': '.previous'
	});

	$(window).resize(function() {
		$('.roundabout-example ul').roundabout_animateToBearing($.roundabout_getBearing($('.roundabout-example ul')));
	})
});

jQueryとjquery.easingとプラグインを読み込んで上記の設定をします。

Related snippet :

  • Description: 少量のコードで実装出来るスクロールトップです。軽量でシンプルなコードのみでトップにもどる、というエフェクトを実装することが出来ます。スクロールと同時 ...
  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...
  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...
  • Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。 Sample: demo ...
  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...