#carousel1 { position: relative; width:600px; height:450px; background:#efefef; overflow:scroll; } #carousel1 img { border: none; } #title { display:none; color:#000; font-size:1.4em; font-weight:bold; margin:20px 0 10px 20px; text-transform:uppercase; } #alt { width: 80%; display:none; color:#999; margin:5px 0 0 30px; font-size: 0.8em; }

昔の聖剣伝説風にメニューを3DでスクロールできるjQueryプラグイン「CloudCarousel」

Web制作 jQuery

こんにちは、及川です。

今回は業務で使ったjQueryプラグインのご紹介です。

カルーセルプラグインはいろいろありますが、奥行きを持たせて輪を描くようなカルーセルを実装する機会があったので、実装サンプルをご紹介します。

弊社のロゴの周りを、ご提供している各サービスのアイコンが回転するようにしました。それぞれのアイコンから関連するページにリンクしています。

実装サンプル

サンプルはPC・Macのみでご覧いただけます。記事のURLをパソコンに転送してご覧ください!
http://www.cherry-pick.jp/blog/web-design/jquery/3djquerycloudcarousel.php

HTML

HTMLはシンプルです。コンテナとなる

要素のなかに、次の要素があります。

  • aタグのtitle属性の中身を表示するdivタグ
  • aタグのalt属性の中身を表示するdivタグ
  • カルーセルするimgタグ
  • 中心に配置するimgタグ

  <div id = "carousel1">
      <div id="title"></div>
      <div id="alt"></div>

      <a href="http://www.cherry-pick.jp/socialrecruit/" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_social@2x.png" alt="Facebook、Twitter、Linkedin等と連携したメディアサイト/会員サイトを制作・開発致します。ソーシャルメディアとの連携により、ユーザー情報取得をスムーズ+活用しやすくなります。" title="ソーシャルメディア連携サイト"></a>
      <a href="http://www.cherry-pick.jp/development/multidevice/" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_multidevice@2x.png" alt="PC・スマートフォンからの閲覧・操作に対応したWebサイトを制作・開発致します。主に「レスポンシブWebデザイン」を利用したサイト制作をご提案しています。" title="マルチデバイス対応サイト制作・開発"></a>
      <a href="http://www.cherry-pick.jp/development/cms/" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_cms@2x.png" alt="世界で最も利用されているCMSソフトウェアの1つであるMovable Typeを用いたCMSサイトを制作・開発致します。MTプラグイン開発にも対応。" title="CMS(Movable Type)サイト構築"></a>
      <a href="http://www.cherry-pick.jp/socialrecruit/grrefer.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_grrefer@2x.png" alt="ソーシャルグラフの活用により「確かな人材を探す企業と、確かなステップアップをしたい人を出会いやすくする」。リファーラルリクルーティングと呼ばれる紹介採用サービスを提供しています。" title="マルチデバイス対応サイト制作・開発"></a>
      <a href="http://www.cherry-pick.jp/socialrecruit/development.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_development@2x.png" alt="広がり続けるソーシャルメディアを活用した「ソーシャル採用」「ソーシャルリクルーティング」を行うWebサイトを企画・制作・開発致します。" title="ソーシャル採用サイト企画・開発"></a>
      <a href="http://www.cherry-pick.jp/company/about.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_about@2x.png" alt="弊社に関する基本情報をご覧いただけます。" title="会社概要"></a>
      <a href="http://www.cherry-pick.jp/company/access.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_access@2x.png" alt="弊社へのアクセス方法、最寄り駅、地図をご確認いただけます。" title="アクセス"></ a>
      <a href="http://www.cherry-pick.jp/company/policy.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_policy@2x.png" alt="弊社のプライバシーポリシー(個人情報保護方針)をご確認いただけます。" title="プライバシーポリシー"></a>
      <a href="http://www.cherry-pick.jp/company/message.php" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_message@2x.png" alt="弊社の代表より株式会社SREにご興味をお持ちいただいた皆さまに、お伝えするメッセージをご覧いただけます。" title="代表メッセージ"></a>
      <a href="https://www.cherry-pick.jp/contact/form.cgi" target="_blank"><img class="cloudcarousel" width="120" src="/blog/images/icon_contact@2x.png" alt="ご提供しているサービス、採用、その他のお問い合わせをご希望の方はこちらからご連絡ください。" title="お問い合せ"></a>
      
      <a href="http://www.cherry-pick.jp/" target="_blank"><img src="/blog/images/img_logo@2x.png" width="150" style="position:absolute;left:238px;top:170px;z-index: 60;" /></a>
  </div>

CSS

CSSもかなりシンプル。表示領域となるコンテナ#carousel1の幅と高さを設定して、position:relative;を指定します。それぞれの画像はCloudCarouselによって表示領域内を座標指定で移動できるようにしておきます。

#carousel1 {
  position: relative;
  width:600px;
  height:450px;
  background:#efefef;
  overflow:scroll;
}

#title {
  display:none;
  color:#000;
  font-size:1.4em;
  font-weight:bold;
  margin:20px 0 10px 20px;
  text-transform:uppercase;
}

#alt {
  width: 80%;
  display:none;
  color:#999;
  margin:5px 0 0 30px;
  font-size: 0.8em;
}

JavaScript

これもjQueryプラグインのCloudCarouselを読み込んで、引数を表示内容にあわせて設定するのみです。今回はスクロールで回転させたかったので、jquery.mousewheel.jsも読み込んでいます。
CloudCarouselはちょっと古くて、jQueryのバージョン1.4以上では非推奨の$.browserという関数を使用しています。これに対応するためjquery.depend.jsプラグインを追加しています。

$.browserが非推奨な理由は、最近IEのモード変更によりたとえばIE9でもIE8のレンダリングモードを選択することができます。しかし、ブラウザのバージョンを取得するJavaScriptのwindow.navigator.userAgentが返すバージョンは9になるため正しい判別ができないので、どんな機能をサポートしているのか、を条件分岐として判別するjQuery.support関数が追加されたようです。

では実際にコードをみてみましょう。

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="/blog/vendor/assets/js/jquery.depend.js"></script>
  <script type="text/javascript" src="/blog/vendor/assets/js/cloud-carousel.1.0.5.js"></script>
  <script type="text/JavaScript" src="/blog/assets/js/jquery/jquery.mousewheel.js"></script>
  <script>
    $(function(){
      $("#carousel1").CloudCarousel({
          xPos: 300, //水平位置
          yPos: 180, //垂直位置
          minScale: 0.5, //最前面画像と最背面画像のサイズ差
          yRadius:120, //前面と背面の高さのズレ幅
          altBox: $("#alt"),  //imgタグのalt属性を表示させるID名
          titleBox: $("#title"), //imgタグのtitle属性を表示させるID名
          bringToFront:false,  //クリックしたらその要素を前面に移動させるかどうか
          mouseWheel:true, //マウスホイールで回転
          autoRotate:true, //自動回転モード
          autoRotateDelay: 3000 //自動回転時の遅延時間
      });
    });
  </script>

IETesterで確認したところIE6でも一応動きました。IEでも動く3Dカルーセルはあまり見当たらないので、CloudCarouselはいまのところ決定版といったところでしょうか。企画性の高いデザインとして活用できそうですね。

商品・サービスへのお問い合わせ

ご相談、お見積もりのご依頼など

お問い合せはこちら