<body onresize="change_size();" onscroll="scrollEvt();">
<h3>scroll 이벤트 : 스크롤바가 1px이라도 움직이면 이벤트가 발생이 됨 (window.scrollY 측정도구로 활용)</h3>
<section id="view">
<div class="wrap">
<div class="left_part"></div>
<div class="right_part"></div>
</div>
</section>
</body>#view{
padding: 40px 0;
background: #ffb;
margin-bottom: 600px;
}
#view .wrap{
width: 1200px;
margin: 0 auto;
background: #fcc;
display: flex;
}
#view .wrap div{
width: 50%;
height: 300px;
background-size: cover;
background-position: 50% 50%;
transition: transform 0.5s, opacity 0.5s;
}
#view .wrap div.left_part{
background-image: url(../img/cont_01.jpg);
transform: translateX(-100%);
opacity: 0;
}
#view .wrap div.right_part{
background-image: url(../img/cont_02.jpg);
transform: translateX(100%);
opacity: 0;
}
#view .wrap div.left_part.active{transform: translateX(0); opacity: 1;}
#view .wrap div.right_part.active{transform: translateX(0); opacity: 1;}var $left = document.querySelector(".left_part");
var $right = document.querySelector(".right_part");
function scrollEvt(){
var $scrollTop = window.scrollY;
// window.scrollY라는 속성은 브라우저의 상단으로부터 얼마나 떨어져 있는가에 대한 측정값
console.log("현재 스크롤바의 상단 위치 : " + $scrollTop);
if($scrollTop > 2300){ //스크롤바의 상단 위치가 2300px 을 통과하는 순간
$left.setAttribute("class", "left_part active");
$right.setAttribute("class", "right_part active");
}else{ //스크롤바의 상단 위치가 2300px 이하로 올라가는 순간
$left.setAttribute("class", "left_part");
$right.setAttribute("class", "right_part");
}
}
초보초보