2013.10.17
jquery

HTMLコンテンツごと切り替え、回転できるjQueryプラグイン

使い方次第では結構ウェブデザインの幅が広がりそうなjQueryのプラグインです。
HTMLのコンテンツごとスライドショーのように切り替えができるRoundaboutというプラグイン。
カルーセル(回転)系のアニメーションのプラグインです。

このプラグイン、いろいろと使い道があるようですが、今回は3例サンプルを作ってみたので紹介します。
jquery014

Roundabout jQueryプラグインサンプル

HTML、CSSは3例とも同じです。

1. head内に記述

HTMLソース

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

1行目がjQury本体、2行目はRoundaboutプラグインです。
head内に記述します。

そしてgoogleのウェブフォントを使っているので
HTMLソース

<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">

もhead内に記述します。

2. CSSソース

body {
   background-color:#e6e6fa;
     }
ul.content {
   list-style: none;
   padding: 0;
   margin: 0 auto;
   width: 680px;
   height: 290px;
   }
ul.content li {
   width: 400px;
   height: 200px; 
   text-align: center;
   cursor: pointer;
   background-color:#fff;
   color:#666;
   box-shadow:  0 0 4px rgba(0, 0, 0, 0.5);
   -moz-box-shadow:  0 0 4px rgba(0,0,0,0.5);
   -webkit-box-shadow:  0 0 4px rgba(0, 0, 0, 0.5);
   padding:10px;
   }
ul.content li img {
   width:50%;
}
ul.content li.roundabout-in-focus {
   cursor: default;
   }
.font {
   font-family: 'Kaushan Script', cursive;
   font-size:1.75em;
   color:#ea5506;
   }

3. HTMLソース

<ul class="content">
   <li>
     <h2>HTMLのコンテンツごと回転</h2>
     <p>内容をここに書いたり・・・</p>
     <div class="font">Contents No.1</div>
     <p>You can put some contents here...</p>              
   </li>  
   <li>
      <h2>いくつでもコンテンツを追加可能</h2>
      <p>&lt;li&gt;を追加していくことで<br/>何個でもコンテンツを回転させられます。</p>
      <div class="font">Contents No.2</div>
      <p>You can put some contents here...</p>
   </li> 
   <li class="img-example">
     <h2>もちろん画像も追加可能</h2>
     <img src="http://ri-mode.com/photos/files/2013/10/food015-250x140.jpg">
     <div class="font">Contents No.3</div>
   </li>
  <li>
     <h2>お好きな内容を</h2>
     <div class="font">Contents No.4</div>
     <p>You can put some contents here...</p>
    </li>
    <li class="img-example">
      <h2>お好きな内容を</h2>
      <img src="http://ri-mode.com/photos/files/2013/09/food010-250x140.jpg">
      <div class="font">Contents No.5</div>
    </li>
</ul>

<li>を何個でも追加できます。

4. jQueryソース

それぞれ<body>タグの直後か</body>タグの直前に記述。

スタンダードの場合

jquery015

Roundabout jQueryプラグインサンプル

$(document).ready(function() {
      $('ul.content').roundabout();
});		

3Dの場合

なかなか素敵なカルーセルですが、ブラウザはChromeしか3Dになりません。
その他のブラウザだと、スタンダードの表示になります。
jquery016

Roundabout jQueryプラグインサンプル

$(document).ready(function() {
   $('.content 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.content').roundabout({
         minScale: 0.7,
         duration: 500,
         autoplay:true,
         autoplayDuration:6000
         });
});

ローラーコースターの場合

もう1つ、Roundabout ShapesというRoundaboutの同系プラグイン追加で可能です。
ローラーコースター以外も色々なエフェクトがありますのでぜひ試してみてください。
(ダウンロードはこちら
jquery017

Roundabout jQueryプラグインサンプル

HTMLのheadにRoundabout Shapesを読み込むために以下を記述します。
HTMLソース

<script src="jquery.roundabout-shapes.min.js"></script>

jQueryソース

$(document).ready(function() {
      $('ul.content').roundabout({
              shape: 'rollerCoaster'
      });
   });

5. jQueryのオプション

いろんなオプションがこちらのページ下部で紹介されています。
使用頻度が高そうなものを以下にチョイスしました。

  • minZ ・・・・・・ z-indexの最少値。デフォルト値は100
  • maxZ ・・・・・・ z-indexの最大値。デフォルト値は280
  • minOpacity ・・・・・・ 透明度の最小値。デフォルト値は0.4
  • maxOpacity ・・・・・・ 透明度の最大値。デフォルト値は1.0
  • minScale ・・・・・・ サイズの最小値。デフォルト値は0.4
  • maxScale ・・・・・・ サイズの最大値。デフォルト値は1.0
  • autoplay ・・・・・・ オートプレイ。trueで自動でアニメーション。デフォルト値はfalse
  • autoplayDuration ・・・・・・ autoplayがtrueの場合にアニメーションの間隔。デフォルト値は1000
  • autoplayPauseOnHover ・・・・・・ trueでコンテントにカーソルが乗ってる場合にアニメーションを一時停止。デフォルト値false
関連する記事

コメント & トラックバック
  1. 市川康一

    お世話になります。
    1.headに記述の
    下記の外部読み込みスクリプトは、

    でいいのですよね。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP