ブログBLOG

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider

更新日：2013/01/07

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。

Adaptor, a jQuery 3D content slider

デモページ
 GitHub

現時点では9種類のエフェクトが用意されています。また IEでは CSSの 3Dプロパティに対応していませんが、対応していないブラウザに 3Dエフェクトを指定した場合はフェードなどが自動で適用されます。

■使い方

jQuery 本体とプラグインを読み込み


&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/box-slider-all.jquery.min.js"&gt;&lt;/script&gt;

HTML では [ figure ] タグでコンテンツを囲み、下部にインジケータを表示する [ div ] を用意


&lt;div class="slider-viewport"&gt;
  &lt;div id="content-box"&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-1.png"&gt;
      &lt;figcaption&gt;This is slide one's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-2.png"&gt;
      &lt;figcaption&gt;This is slide two's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="img/slide-3.png"&gt;
      &lt;figcaption&gt;This is slide three's description&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure class="slide"&gt;
      &lt;img src="img/slide-4.png"&gt;
      &lt;figcaption&gt;This is slide four's description&lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/div&gt;
  &lt;div id="time-indicator"&gt;&lt;/div&gt;
&lt;/div&gt;

<figcaption>This is slide one's description</figcaption>

</figure>

<figcaption>This is slide two's description</figcaption>

</figure>

<figcaption>This is slide three's description</figcaption>

</figure>

<figcaption>This is slide four's description</figcaption>

</figure>

</div>

</div>

CSS ではインジケータの色やサイズを指定


#time-indicator {
    width: 0;
    height: 3px;
    background: #C5923F;
    position: absolute;
    bottom: -3px;
}

#time-indicator {

width: 0;

height: 3px;

background: #C5923F;

position: absolute;

bottom: -3px;

}

Script はインジケータ開始と停止の処理を用意しオプションで指定


var $timeIndicator = $('#time-indicator');
var indicatorWidth = $('#content-box').width();
var timeoutVal = 7500;

var indicatorStart = function () {
  $timeIndicator.animate({ width: indicatorWidth }, timeoutVal);
};

var indicatorEnd = function () {
  $timeIndicator.stop().css({ width: '0' });
};

$('#content-box').boxSlider({
  autoScroll: true
  , speed: 1000
  , timeout: timeoutVal
  , effect: 'scrollHorz3d'
  , onbefore: indicatorEnd
  , onafter: indicatorStart
});
indicatorStart();

var $timeIndicator = $('#time-indicator');

var indicatorWidth = $('#content-box').width();

var timeoutVal = 7500;

var indicatorStart = function () {

$timeIndicator.animate({ width: indicatorWidth }, timeoutVal);

};

var indicatorEnd = function () {

$timeIndicator.stop().css({ width: '0' });

};

$('#content-box').boxSlider({

autoScroll: true

, speed: 1000

, timeout: timeoutVal

, effect: 'scrollHorz3d'

, onbefore: indicatorEnd

, onafter: indicatorStart

});

indicatorStart();

ここでは下記のオプションを例にしました。

autoScroll
　　　自動スクロールの有無
speed
　　　コンテンツ切り替えのスピード
timeout
　　　コンテンツを表示している時間
effect
　　　エフェクトの種類
onbefore
　　　切り替え開始前のイベント
onafter
　　　切り替え完了後のイベント

インジケータ開始の処理を [ indicatorStart ]、インジケータ停止の処理を [ indicatorEnd ] で用意し、オプションでイベントに組み込んでいます。そして初回のインジケータ表示のために [ indicatorStart ] の呼び出しをしています。

まだ CSSの 3Dプロパティは実験段階のため、たまにおかしな方向に動くときもありますが… それでも少し他と違うスライドを実装したいときなどに利用してみてはいかがでしょうか。

（藤崎）