html, body {
background: black;
padding: 0;
margin: 0;
}
section{
height: 100vh;
}
.inner{
height: 80%;
width: 100%;
position: relative;
overflow: hidden;
}
.text{
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
z-index: 3;
font-size: 30px;
font-weight: bold;
color: white;
left: 0;
right: 0;
}
.bg{
position: absolute;
top: 0%;
bottom: 0%;
height: 100%;
width: 100%;
}
.img{
background-image: url(https://twotone.me/wp-content/uploads/2020/06/waterfall.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:cover;
height: 100%;
width:100%;
}
jQuery(function($){
$(document).scroll(function() {
$("section").each(function(){
var imgPos = $(this).offset().top;//画像の位置
var scrollPos = $(window).scrollTop();//現在位置
var windowHeight = $(window).height();//ウィンドウサイズ
var imgRange = imgPos + $(this).innerHeight();//画像範囲
var contentTop = scrollPos + windowHeight - imgPos;//画像内の位置情報(scrollTop関数の代わり)
$('.img').css('background-size','auto ' + (windowHeight + $(this).innerHeight() / 20) +'px');//画像のリサイズ
if(scrollPos+windowHeight > imgPos && scrollPos < imgRange ){//画像が画面内に少しでも入ったらtrue
$(this).find('.img').css({
"background-position-y": (-contentTop / 20)//背景画像をスクロールに合わせて上にずらす
})
}
});
});
});
【jQuery】スクロールに合わせて背景画像が上にずれるパララックス(複数対応)
2020/06/05