Parallax효과 만들기
코드블럭
<!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>패럴랙스 이펙트02</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript parallax Effect01</h1>
<p>패럴랙스 이펙트: 사이드 메뉴</p>
<ul>
<li><a href="parallaxEffect01.html">1</a></li>
<li class="active"><a href="parallaxEffect02.html">2</a></li>
<li><a href="parallaxEffect03.html">3</a></li>
<li><a href="parallaxEffect04.html">4</a></li>
<li><a href="parallaxEffect05.html">5</a></li>
<li><a href="parallaxEffect06.html">6</a></li>
</ul>
</header>
<!--header -->
<nav class="parallax__dot">
<ul>
<li class="active"><a href="#section1">메뉴1</a></li>
<li><a href="#section2">메뉴2</a></li>
<li><a href="#section3">메뉴3</a></li>
<li><a href="#section4">메뉴4</a></li>
<li><a href="#section5">메뉴5</a></li>
<li><a href="#section6">메뉴6</a></li>
<li><a href="#section7">메뉴7</a></li>
<li><a href="#section8">메뉴8</a></li>
<li><a href="#section9">메뉴9</a></li>
</ul>
</nav>
<!-- parallax__dot -->
<main id="main">
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">section1</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">결과도 중요하지만, 과정을 더 즁요하게 생각한다.</p>
</section>
<!--//section1-->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">section2</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다.</p>
</section>
<!--//section2-->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">section3</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">웃음은 두 사람간의 가장 가까운 거리다</p>
</section>
<!--//section3-->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">section4</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">지속적인 긍정적 사고는 능력을 배가시킨다.</p>
</section>
<!--//section4-->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">section5</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다.</p>
</section>
<!--//section5-->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">section6</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다</p>
</section>
<!--//section6-->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">section7</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">노력을 이기는 재능은 없고 노력을 외면하는 결과도 없다</p>
</section>
<!--//section7-->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">section8</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">사소한 것들을 소중히 해야한다. 그것이 삶을 이루는 버팀목이니까</p>
</section>
<!--//section8-->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">section9</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">때론 기회를 놓치는 것이 기회일 수 있다.</p>
</section>
<!--//section9-->
</div>
</main>
<!-- main -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallax__info -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!-- footer -->
<script>
document.querySelectorAll(".parallax__dot li a").forEach(dot => {
dot.addEventListener("click", e => {
e.preventDefault();
document.querySelector(dot.getAttribute("href")).scrollIntoView({behavior:"smooth"});
});
});
window.addEventListener("scroll", () => {
//scrollTop값
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".parallax__info .scroll span").innerText = parseInt(scrollTop);
//dot 누르면 스크롤 이동
document.querySelectorAll(".parallax__item").forEach((item, num) => {
if(scrollTop > item.offsetTop-2){
document.querySelectorAll(".parallax__dot li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(".parallax__dot li:nth-child("+(num+1)+")").classList.add("active");
}
});
})
// window.scroll(0, 10000);
// window.scroll({left: 100, top: 4000});
//indow.scroll({left: 100, top: 4000, behavior: "smooth"});
//window.scroolTo(0,1000);
//window.scroolTo({left: 100, top: 4000});
//window.scroolTo({left: 100, top: 4000, behavior: "smooth"});
//window.scrollBy(0, 1000);//페이지 키면 바로 이동
//window.scrollBy({left:100, top:4000})
//window.scrollBy({left:100, top:4000, behavior: "smooth" });
</script>
</body>
</html>보충설명
✨ "parallax__dot" 클래스에 속한 모든 li 요소의 하위 요소인 a 태그들에 대해 이벤트 리스너를 등록합니다. 이벤트는 클릭이 발생할 때 실행됩니다.
✨이벤트 핸들러 함수는 이벤트 객체를 매개변수로 받아 preventDefault() 메서드를 호출하여 기본 동작(링크 클릭시 해당 링크로 이동하는 동작)을 막습니다. 그 후, 클릭한 a 태그의 href 속성값에 해당하는 요소를 smooth하게 스크롤링하는 scrollIntoView() 메서드를 호출합니다.
✨즉, "parallax__dot" 클래스에 속한 li 요소들을 클릭하면, 각각의 a 태그의 href 속성값에 해당하는 요소로 스무스하게 스크롤링하도록 구현한 것입니다.
//사이드에 dot버튼으로 화면이동
✨ 페이지에서 스크롤 이벤트가 발생하면 실행되며, 스크롤의 위치에 따라 현재 스크롤 위치 값을 .parallax__info .scroll span 요소에 표시하고, .parallax__item 클래스를 가진 요소들의 위치를 비교하여 해당 위치에 해당하는 점(dot)을 활성화하는 기능을 구현합니다.
✨ window.addEventListener("scroll", () => {...})을 사용하여 스크롤 이벤트가 발생할 때마다 콜백 함수를 실행합니다.
✨ window.pageYOffset 또는 window.scrollY를 사용하여 현재 스크롤 위치 값을 구하고, document.querySelector(".parallax__info .scroll span").innerText를 사용하여 .parallax__info .scroll span 요소에 스크롤 위치 값을 표시합니다.
✨ document.querySelectorAll(".parallax__item")을 사용하여 .parallax__item 클래스를 가진 요소들을 선택하고, forEach 메소드를 사용하여 각각의 요소에 대해 반복적으로 실행합니다.
✨ 각 요소에 대해 if 문을 사용하여 현재 스크롤 위치와 해당 요소의 위치를 비교합니다. 만약 scrollTop 값이 item.offsetTop-2보다 크다면, 해당 요소가 현재 보이는 영역에 있다는 의미이므로, .parallax__dot li 클래스를 가진 요소들을 선택하여 forEach 메소드를 사용하여 각각의 요소에 대해 반복적으로 실행합니다.
✨ 각 요소에 대해 classList.remove("active")를 사용하여 active 클래스를 제거한 후, document.querySelector(".parallax__dot li:nth-child("+(num+1)+")").classList.add("active") 코드를 사용하여 num+1 번째 점 요소에 active 클래스를 추가합니다.
✨ 이렇게 함으로써 현재 스크롤 위치와 해당 요소의 위치를 비교하여 해당 위치에 해당하는 점을 활성화하고, 스크롤 위치 값을 표시하는 기능을 구현할 수 있습니다.