読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

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

jQuery JavaScript

内容

ちょっとココナラの依頼で苦戦したので備忘録的に書いときます。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
  });
});

ちょっと解説

スライダー部分はプラグイン使っただけなので特に言及する事はないです。
ちょっとつまったのは絶対位置で背景に設定するところ。widthが1580pxある画像のスライダーに対し、コンテンツはwidthは940pxなので普通におくと背景画像が左から表示されてしまいます。

これをいい感じに中央に置くにはスライダーに以下スタイルを設定します。

left:50%;
margin-left:-790px;

左に50%ずらした上でmargin-left:画像の半分の幅を設定する事で絶対位置のコンテンツがいい感じに中央に設定されます。

で、やったか!?と思ったらやってない少年漫画のような展開。

今度はスライダーの画像の大きさがコンテンツの幅を大きく超えているため、横スクロールバーが表示されてしまいます。

ここでちょっと詰まり、Google先生助けてっという感じで調査。

以下スタイルを追加する事で解決。はみ出た背景画像がいい感じでウィンドウ幅にアジャストされます。

html {
overflow: auto;
}
body {
overflow-x: hidden;
position: relative;
}

これで完成です。

後はスライドショーと重なっているコンテンツにposition:relativeをつけて、z-indexをスライドショーより強く設定してあげれば完成です。
お試しあれ。