■ 아래 컨텐츠가 밀어 올리면서 화면전환
<style>
body, html{
margin: 0;
}
.container {
width: 100%;
height: 480vh;
position: relative;
}
.section {
width: 100%;
height: 120vh;
position: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.section:nth-child(1) {
background-image: url("https://picsum.photos/id/20/2000/900");
}
.section:nth-child(2) {
background-image: url("https://picsum.photos/id/21/2000/900");
}
.section:nth-child(3) {
background-image: url("https://picsum.photos/id/22/2000/900");
}
.section:nth-child(4) {
background-image: url("https://picsum.photos/id/23/2000/900");
}
.container2{
position: relative;
z-index: 1;
height: 200vh;
background-color: #e4c2c2;
}
</style>
<body>
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<div class="container2">
</div>
</body>
<script>
$(function(){
let li = [];
$(".section").each(function(i){
$(this).css("top",(i*$(this).height())+"px");
li.push($(this).offset().top);
});
$(window).scroll(function(){
let wsc = $(this).scrollTop();
$(".section").each(function(i){
let sc = li[i]-wsc;
if(sc<0){sc=0}
console.log(sc);
$(this).css("top",sc+"px");
});
});
});
</script>
■ 패럴렉스 옆으로 이동 이후 콘텐츠 올라오기
<style>
body, html{
margin: 0;
}
.con{
width: 100%;
height: 120vh;
}
.container {
width: 400%;
height: 120vh;
position: fixed;
display: flex;
}
.section {
width: 100%;
height: 120vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.section:nth-child(1) {
background-image: url("https://picsum.photos/id/20/2000/900");
}
.section:nth-child(2) {
background-image: url("https://picsum.photos/id/21/2000/900");
}
.section:nth-child(3) {
background-image: url("https://picsum.photos/id/22/2000/900");
}
.section:nth-child(4) {
background-image: url("https://picsum.photos/id/23/2000/900");
}
.container2{
position: relative;
z-index: 1;
height: 200vh;
background-color: #e4c2c2;
}
</style>
<body>
<div class="con">
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
</div>
<div class="container2">
콘텐츠2
</div>
</body>
<script>
$(function(){
let ctw = $(".container").width();
let ctww = ctw-$(".section").width();
let sc;
$(".container2").css("top",ctww+"px");
$(window).scroll(function(){
sc = $(window).scrollTop();
if(ctww>sc){
$(".container").css("left",-sc+"px");
}
else{
$(".container").css("left",-ctww+"px");
$(".container").css("top",-(sc-ctww)+"px");
console.log(-(sc-ctw));
}
});
});
</script>