jQueryで作ったスライドショーを背景に設定してみる

内容

ちょっとココナラの依頼で苦戦したので備忘録的に書いときます。CSS苦手。。。

依頼の内容はbodyの背景画像に設定していた画像にエフェクトをかけたいという話でスライドショーいれてみますかねーという流れ。
css3で解決してもよかったのですが、ちょっと凝ったエフェクトにしたいと言われたのでJSで頑張る方向に

頭の中ではこんな感じ。

①とりあえず適当にjQuery プラグインをつっこんでスライドショーを作る。
②作ったスライドショーを絶対位置でメインコンテンツと重なるように置く
③スライドショーと重なっている部分のz-indexを調整して背景っぽく見せる

プラグインはこれ使いました。結構好き。

http://dev7studios.com/plugins/nivo-slider/
※wordpress用プラグインだと有償ですが単にjQuery プラグインとして使うなら無償です。

というわけで作ってみる

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>背景にスライドショーを設定するお！</title>
  <link rel="stylesheet" href="js/nivoSlider/nivo-slider.css" type="text/css" media="all" />
  <style type="text/css">
    html {
      overflow: auto;
    }
    body {
      overflow-x: hidden;
      position: relative;
    }
    #top_banner_warp{
      width:1580px;
      height:555px;
      position:absolute;
      overflow:hidden;
      text-align:left;
      left:50%;
      margin-left:-790px;
    }
    .banner_disp{
      position:relative;
      z-index:9999;
    }
  </style>
</head>
<body>
  <!-- スライド部分 背景 -->
  <div id="top_banner_warp">
    <img src="images/main01.jpg" alt="" />
    <img src="images/main02.jpg" alt="" />
    <img src="images/main03.jpg" alt="" />
  </div>

  <!-- メインコンテンツ開始 -->
  <div id="contents" class="banner_disp">
    <div id="header" style="height:300px;">
      <div>たいとるたいとるたいとるたいとる</div>
    </div>
    <div id="main" style="height:300px;">
      <div>こんてんつこんてんつこんてんつ</div>
    </div>
    <div id="footer" style="height:300px;">
      <div>ふったーふったーふったー</div>
    </div>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="js/nivoSlider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  <script src="js/sliderInit.js" type="text/javascript"></script>
</body>
</html>

sliderInit.js

$(function(){
  $('#top_banner_warp').nivoSlider({
    effect: 'fold',               // Specify sets like: 'fold,fade,sliceDown'
    slices: 15,                     // For slice animations
    boxCols: 5,                     // For box animations
    boxRows: 2,                     // For box animations
    animSpeed: 1000,                 // Slide transition speed
    pauseTime: 5000,                // How long each slide will show
    startSlide: 0,                  // Set starting Slide (0 index)
    directionNav: false,             // Next & Prev navigation
    controlNav: false,               // 1,2,3... navigation
    controlNavThumbs: false,        // Use thumbnails for Control Nav
    pauseOnHover: false,             // Stop animation while hovering
    manualAdvance: false,           // Force manual transitions
    prevText: 'Prev',               // Prev directionNav text
    nextText: 'Next',               // Next directionNav text
    randomStart: false             // Start on a random slide
  });
});