CSS, HTML, JavaScript, JQuery, Web開発

【Web開発サンプル】スクロールによる画像の変更

使用ブラウザ:Google Chrome
使用言語:HTML, CSS, JavaScript
使用ライブラリ:JQuery


左側にはスクロールするcontainerを用意します。
今回は、タイトルと本文だけ入れてます。
右側には画像を必要なだけ表示します。(今回は3枚です。)
左側をスクロールし、一定の位置で画像の透明度を変更させ、次の画像を表示する仕組みです。

以下コード

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>上下スライド</title>

  <!-- Style -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!-- Script -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>

  <div class="container">
    <header>
      <h2>ヘッダー</h2>
    </header>

    <div class="main-container">
      <div class="scroll-container">
          <h4>タイトル1</h4>
          <p>本文1</p>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/>
          <br/><h4>タイトル2</h4>
          <p>本文2</p>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/>
          <br/><h4>タイトル3</h4>
          <p>本文3</p>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/>
      </div>

      <div class="image-container">
          <img id="image1" src="img/image1.jpg"/>
          <img id="image2" src="img/image2.jpg"/>
          <img id="image3" src="img/image3.jpg"/>
      </div>
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>
css

html, body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


/* container */
.container {
  height: 100%;
  width: 100%;
}

/* header */
header  {
  height: 7%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background: #050505;
}

header h2 {
  margin: 0;
  color: white;
  padding: 10px;
  margin-left: 10px;
}

/* main-container */
.main-container {
  height: 93%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* scroll-container */
.scroll-container {
  height: 100%;
  width: 300px;
  background: orange;
  float: left;
  overflow: scroll;
}

/* image-container */
.image-container {
  height: 100%;
  background: #D8D8D8;
  position: absolute;
  top: 0;
  left: 300px;
  right: 0;
}

.image-container img {
  background-size: cover;
  position: absolute;
  top:0;
  left: 0;
}

#image1 {
  z-index: 3;
  opacity: 1.0;
}

#image2 {
  z-index: 2;
  opacity: 1.0;
}

#image3 {
  z-index: 1;
  opacity: 1.0;
}
js
(function(){
	'use strict';

  $('.scroll-container').scroll(function() {
    // console.log('test');
		var top = $(this).scrollTop();
    console.log(top);

    // スクロール量200を使用し透明度を設定する
    if(top >= 350 && top <= 550) {
      // opacityの設定
      var amount = (top - 350) / 200;
      var op = 1 - amount;
      console.log(op);
      $('#image1').css('opacity', op.toString());
    } else if(top >= 1100 && top <= 1300) {
      // opacityの設定
      var amount = (top - 1100) / 200;
      var op = 1 - amount;
      console.log(op);
      $('#image2').css('opacity', op.toString());
    }

    // スクロール量が大きい時の対処
    if(top < 350) {
      $('#image1').css('opacity', '1.0');
    } else if(top > 550 && top < 1100) {
      $('#image1').css('opacity', '0.0');
      $('#image2').css('opacity', '1.0');
    } else if(top > 1300) {
      $('#image2').css('opacity', '0.0');
      $('#image3').css('opacity', '1.0');
    }
	});
})();

以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です