<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세로에서 가로모드로 스크롤하기</title>
<link rel="stylesheet" href="assets/css/prtstyle.css">
</head>
<body>
<div class="scroll">0</div>
<section id="section1"></section>
<section id="section2"></section>
<section id="section3">
<div class="sec3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</section>
<section id="section4"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script>
$(window).scroll(function(){
let scroll = $(window).scrollTop();
$(".scroll").text(scroll);
let offset = scroll - $("#section3").offset().top
if(scroll > $("#section3").offset().top){
$(".sec3").css({left:-offset+"px"})
}
});
</script>
</body>
</html>@charset "utf-8";
*{
margin:0;
padding: 0;
}
.scroll {
position: fixed;
left: 20px; top: 20px;
z-index: 100000;
}
#section1{
height:200vh;
background: #F3EEE8;
position: relative;
z-index:6000;
}
#section2{
height:3000px;
background: #000;
position: relative;
z-index:7000;
}
#section3{
height: 3000px;
background: red;
position: relative;
z-index:4000;
}
#section4{
height: 4000px;
background: blue;
position: relative;
z-index: 5000;
}
.sec3{
position:fixed;
left:0; top:0;
overflow: hidden;
width:1600px;
background: rgb(255, 0, 157);
}
.sec3 > div{
width:400px;
height: 100vh;
float:left;
}
.sec3 > div:nth-child(1){background: rgb(63, 83, 214);}
.sec3 > div:nth-child(2){background: rgb(94, 125, 102);}
.sec3 > div:nth-child(3){background: rgb(134, 63, 63);}
.sec3 > div:nth-child(4){background: rgb(234, 114, 114);}반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] preventDefault (0) | 2021.07.20 |
|---|---|
| [Javascript] classList.toggle (0) | 2021.07.20 |
| 조건문(if) (0) | 2021.07.15 |
| Build process(인터프리터 언어/ 컴파일 언어) (0) | 2021.07.02 |
| [Javascript] parseInt() (0) | 2021.06.30 |
