文字が遅れるパララックス効果!jQuery スライドショー

文字が遅れるパララックス効果!jQuery スライドショーのイメージ
お気づきの方もいるかもしれませんが、トップページのスライドショーが変わりました。
見た目は変わっていませんが、スライドショーにパララックス効果を入れてみました。前回はslidesjsというプラグインを使っていましたが、デザインが気に入っていたので、装飾はなるべく継承して実装してみました。


jQuery Destaque Plugin
jquery_destaque_plugin


以下のプラグインをダウンロード。
http://globocom.github.io/destaque/js/jquery.destaque.js
http://globocom.github.io/destaque/js/jquery.destaque.queue.js

※jquery.easing.jsもお忘れなく。


JS
$(function () {
  var destaque = $("#slide-container").destaque({
    //各要素のスピード設定
    slideMovement: 1000,
    slideSpeed: 1000,
    elementSpeed: 1100,
    autoSlideDelay: 10000,
    //コンテナ要素の指定
    itemSelector: ".item",
    //背景要素の指定
    itemBackgroundSelector: ".background",
    //前景要素の指定(文字等)
    itemForegroundElementSelector: ".foreground .element",
    //コントローラーの設定
    controlsSelector: ".pager",
    //ページネーションが少し早いので、調整。
    onPageUpdate: function(destaque, pageData) {
    setTimeout(function(){
      $(".pagination .bullet").removeClass("active");
      $(".pagination .bullet[rel='"+ pageData.currentSlide +"']").addClass("active");
    },700);
  }
}); 
$(".pagination .bullet").click(function(e) {
  e.preventDefault();
  destaque.goTo(parseInt($(this).attr("rel"), 10));
  });
});
オプション等の説明はこちら。
https://github.com/globocom/destaque


HTML
<section id="hero">
  <div id="slide-container" class="behavior">
    <div class="item first">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル1</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item second">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル2</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item third">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル3</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item fourth">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル4</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="controller">
      <a href="#"><img src="/static/img/slides.jquery/arrow-prev.png" class="pager prev"  rel="prev"></a>
      <a href="#"><img src="/static/img/slides.jquery/arrow-next.png" class="pager next" rel="next"></a>
    </div>
  </div>
</section>
<div class="clearfix">
  <ul class="pagination">
    <li><a href="#" class="bullet active" rel="0"></a></li>
    <li><a href="#" class="bullet" rel="1"></a></li>
    <li><a href="#" class="bullet" rel="2"></a></li>
    <li><a href="#" class="bullet" rel="3"></a></li>
  </ul>
</div>


CSS
#hero,
#slide-container,
#slide-container .item,
#slide-container .item a,
#slide-container .background{ width:100%; height: 500px; }
#hero{ overflow:hidden; }
#slide-container{ position:relative; background-color:#eee; }
#slide-container .item{ position:absolute; top:0; left:0; display:none; overflow:hidden; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
#slide-container .item a{ display:block; width:100%; height:500px; }
#slide-container .item a:hover{ text-decoration:none; }
#slide-container .background { position:absolute; background-position:center center; background-repeat:no-repeat; overflow:hidden; }
#slide-container .foreground{ position:absolute; padding:150px 100px; }
#slide-container .foreground .element { position: relative; }
#slide-container .title{ margin-bottom:10px; font-size:50px; font-weight:bold; color:#fff; }
#slide-container .subtitle{ font-size:16px; color:#fff; }
#slide-container .first .background{ background-image:url(../img/demo_destaque_0001.jpg); }
#slide-container .second .background{ background-image:url(../img/demo_destaque_0002.jpg); }
#slide-container .third .background{ background-image:url(../img/demo_destaque_0003.jpg); }
#slide-container .fourth .background{ background-image:url(../img/demo_destaque_0004.jpg); }
#slide-container .controller .pager{ position:absolute; top:230px; z-index:9999; }
#slide-container .controller .prev{ left:20px; }
#slide-container .controller .next{ right:20px; }
.pagination{ position:relative; left:50%; float:left; margin-top:40px; }
.pagination li { float:left; position: relative; right:50%; margin:0 1px; list-style:none; }
.pagination li .bullet { display:block; width:12px; height:0 !important; padding-top:12px; background-image:url(../img/slides.jquery/pagination.png); background-position:0 0; float:left; overflow:hidden; }
.pagination li .active { background-position:0 -12px; }


あとは各自セレクタやスタイルシートを自分の環境に設定すればナイスなスライドショーの完成です。
別途デモページを用意しました。


DEMO