画像等を回転して見せる事ができるjQueryプラグイン-Roundabout

画像等を回転して見せる事ができるjQueryプラグイン-Roundabout

リストでマークアップした要素をくるくる回転させて見せる事ができるJQueryのプラグイン、Roundaboutを使ってみました。

サンプル」も作りました。

スタンダードでは要素が奥行きがあるようにくるくる回転しますが、オプションで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。

Roundabout

ダウンロード

ダウンロード:fredleblanc/roundabout · GitHub

使い方

スタンダード

htmlはulのリスト形式で記入し、回転させたいものをliの中に記入します。

cssはulの横幅(回転するボックスが並んだ横幅より少し大きいくらいのサイズ)と、liの横と縦のサイズを指定します。

ヘッド内でjQuery本体とプラグインファイルを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="jquery.roundabout.js"></script>

続けてヘッド内で下記のように記入します。

<script>
	$(document).ready(function() {
		$('ul').roundabout();
		//ulの部分は回転させる要素の親を指定
	});
</script>

スタンダードな回転はこれだけで設置できます。

3Dで設置する

ヘッドへの記述を下記のようにすれば3Dで設置できます。
スライドする際の動きを「jQuery Easing Plugin」を使用しているので、プラグインをダウンロードして読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="jquery.roundabout.js"></script>
<script src="jquery.easing.js"></script>
<script>
		$(document).ready(function() {
			$('li')
				.bind({
				"reposition": function() {
				var degrees = $(this).data('roundabout').degrees,
			    roundaboutBearing = $(this).parent().data('roundabout').bearing,
			    rotateY = Math.round(roundaboutBearing - degrees);
					
			$(this).css({
				"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
				"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
				"transform": "perspective(2000) rotateY(" + rotateY + "deg)",
				});
			}
})
			$('ul').roundabout({
			minScale: 0.7,
			easing: 'easeOutElastic',
			duration: 1600
		});
	});
</script>

3Dで設置で回転させるものが画像の場合に、両サイドの画像はtransformで変形させる為、40px縦サイズが大きくなります。正面にくる画像は変形させない為元のサイズで表示され、正面とサイドでサイズ変わってきてしまいます。結果、画像がずれて表示されます。(サンプル2のような感じです。)
正面の画像には”roundabout-in-focus”というクラス名が付与されるので、CSSでサイズを変えてみたりしましたが、なかなか上手くいきません…。ズレが気持ち悪いですね。js側でサイズを指定しようと思ったのですが上手く出来ませんでした…。うーん。また時間がある時に考えてみようと思います。

2014/08/27 追記

上記の 3D で設定した際に、横の画像と正面の画像の大きさにズレがでてしまった問題は、横の画像に width:100% を設定したら直りました。

作ってみたサンプル

サンプル1デモ(スタンダード): roundabout_demo1

サンプル2デモ(3D): roundabout_demo2

• サンプル1のhtml

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="jquery.roundabout.js"></script>
<script>
	$(document).ready(function() {
		$('ul').roundabout();
	});
</script>
</head>
<body>
<h1> memocarilogdemo|roundabout_Standard</h1>
<ul>
<li><img src="photos1.png" /></li>
<li><img src="photos2.png" /></li>
<li><img src="photos3.png" /></li>
<li><img src="photos4.png" /></li>
</ul>
<p><a href="">元のページへ戻る</a></p>

• サンプル1のcss

html { padding: 0; margin: 0; }
body {padding: 0;margin: 0;}
h1,p {text-align: center;
	padding: 20px;}
ul {list-style: none;
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 450px;}
li {height: 300px;
	width: 500px;
	text-align: center;
	cursor: pointer;}

• サンプル2のhtml

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="jquery.roundabout.js"></script>
<script src="jquery.easing.js"></script>
<script>
$(document).ready(function() {
	$('li')
	.bind({
       	"reposition": function() {
	var degrees = $(this).data('roundabout').degrees,
      	    roundaboutBearing = $(this).parent().data('roundabout').bearing,
	    rotateY = Math.round(roundaboutBearing - degrees);
							
	$(this).css({
	"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
	"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
	"transform": "perspective(2000) rotateY(" + rotateY + "deg)",
	});
    }
})
	$('ul').roundabout({
	minScale: 0.7,
	easing: 'easeOutElastic',
	duration: 1600
	});
});
</script>
</head>
<body>
<h1> memocarilogdemo|roundabout_3D</h1>
<ul>
<li><img src="photos1.png" /></li>
<li><img src="photos2.png" /></li>
<li><img src="photos3.png" /></li>
<li><img src="photos4.png" /></li>
<li><img src="photos2.png" /></li>
</ul>
		
<p><a href="">元のページへ戻る</a></p>
</body>

• サンプル2のcss

html { padding: 0; margin: 0; }
body {padding: 0;margin: 0;}
h1,p {text-align: center;
	padding: 20px;}
ul {	list-style: none;
	padding: 0;
	margin: 0 auto;
	padding-top:20px;
	width: 760px;
	height: 500px;}
li {	height: 300px;
	width: 500px;
	text-align: center;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	display: block;}
li.roundabout-in-focus {
        cursor: default;
	display: block;}
li img{
	width: 100%;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能