使用ブラウザ: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');
}
});
})();
以上です。