画像等を回転して見せる事ができるjQueryプラグイン-Roundabout
リストでマークアップした要素をくるくる回転させて見せる事ができるJQueryのプラグイン、Roundaboutを使ってみました。
「サンプル」も作りました。
スタンダードでは要素が奥行きがあるようにくるくる回転しますが、オプションで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。
ダウンロード
ダウンロード：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デモ（３D）: 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%;
}
No Comments & Tracbacks