イメージスライダーにひと工夫して動きをつける #JavaScript

これは何？

主張したい要素に目を引かせるために、イメージスライダー内に動きを加えたものを作成したので、それのメモです。
demo

はじめに

トップにどーんと大きい画像を配置し、コンテンツを切り替えるスライダーはよくある見せ方だと思います。

切り替え時にフェードさせたり、カーテンのようにパラパラと動かしたり、3Dでぐるぐる回したり・・・
エフェクトによって面白くて目を引くような見せ方もできますが、ここでは切り替えはシンプルにしつつ、動きで中の要素を目立たせることをしてみます（最近よく見かけますね）

エフェクトはある程度パターンが決まってしまいますが、要素の動きであればいくらでも面白い見せ方ができるかと思います。

スライダープラグイン

スライダーの実装にはプラグインを使用しています。
プラグインは以下を満たしているものであれば、何でも良いかと思います。

imgだけでなくdiv, liなどブロックごとにスライドできるもの
スライドの読み込み・各スライドが完了時のcallbackが用意されているもの

ここではbxSliderを使用しています
（対応ブラウザがIE7+というのも嬉しいです）
http://bxslider.com/

企業サイトなどでこういったスライダーを取り入れることが多いのですが、
未だにオールドブラウザに対応せざるを得ないこともあります。
その上でスライダーで何か面白い動きを、と要求されると切り替えエフェクトだけでは厳しいです（面白い動きは大抵モダンブラウザのみ...もしくは動作が重くならざるを得なかったりするため）

考え方

まずは普通にスライダーを設定します
各スライドの切り替えが終わったことを受けて（callback）、該当スライド内の要素をアニメーションさせます
アニメーションはJSでもCSSでも何でも良いかと思います（ここではCSSを利用し、要素をフェード+回転させています）

実装

*cssは省略。

<div class="slider">
  <ul class="slider__inner">
    <li>
      <div class="slider__cap">メインキャッチコピー</div>
      <div class="slider__cap is-sub">サブキャッチコピー</div>
      <img src="img/pic1.jpg" />
    </li>
    <li>...</li>
  </ul>
</div>

$(function() {
    var $slider      = $('.slider__inner');
    var $sliderLists = $slider.find('li');
    var CLASS_NAME   = 'is-active';

    /**
     * classを付け替える関数
     * classによってCSSアニメーションを操作する
     * @param {object} $elm: $sliderListsに含まれる、liをjqueryObjectとして渡す
     */
    function switchClass($elm) {
        $sliderLists.removeClass(CLASS_NAME); /* Delete */
        $elm.addClass(CLASS_NAME); /* Add */
    }

    /* sliderのオプション */
    var options = {
        /* sliderが読み込まれたら */
        onSliderLoad: function(currentIndex) {
            var $elm = $($sliderLists[currentIndex]);
            switchClass($elm);
        },
        /* sliderが完了したら */
        onSlideAfter: function($elm, oldIndex, newIndex) {
            switchClass($elm);
        },
        randomStart: true,
        auto: true
    };

    /* コンテンツが読み込まれたら実行 */
    $(window).load(function() {
        /* bxSlider実行 */
        $('.slider__inner').bxSlider(options);
    });
});

おわりに

動きで目立たせようとしているため、デザインがシンプルだとより効果的かもしれません。
またそれほど難しいものも無いので、JSが苦手なデザイナーの方でも取り入れやすいのではないでしょうか。