728x90
이번엔 닷 메뉴로 이동할 수 있는 패럴럭스 이펙트 입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<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 Effect02</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>
<li><a href="parallaxEffect07.html">7</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>
<div class="scrollBar">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</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:1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
</body>
</html>이번엔 scrollTop값만 구하고 스크롤 바를 추가하여 주었습니다.
나머지는 패럴랙스 이펙트 01과 동일합니다.
scrollBar CSS
css에 스크롤 바 부분을 추가해주었습니다.
body::-webkit-scrollbar {
width: 8px; /* 스크롤바의 너비 */
}
body::-webkit-scrollbar-thumb {
height: 15%; /* 스크롤바의 길이 */
background: #5e5e5f; /* 스크롤바의 색상 */
border-radius: 10px;
}
body::-webkit-scrollbar-track {
background: rgba(117, 117, 117, 0.1); /*스크롤바 뒷 배경 색상*/
}
script
<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", ()=>{
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".parallax__info .scroll span").innerText = parseInt(scrollTop);
document.querySelectorAll(".parallax__item").forEach((item, num) => {
if(scrollTop > item.offsetTop){
document.querySelectorAll(".parallax__dot li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(".parallax__dot li:nth-child("+(num+1)+")").classList.add("active");
}
})
});
</script>.parallax__dot 클래스를 가진 요소 내에 있는 링크(a 요소)들을 모두 선택합니다.
각 링크에 대해 클릭 이벤트 리스너를 등록합니다.
링크를 클릭하면, 링크의 href 속성값으로 지정된 요소를 스무스하게 스크롤링합니다(scrollIntoView() 메서드 사용)
윈도우 객체에 scroll 이벤트 리스너를 등록합니다.
스크롤 이벤트가 발생할 때, 현재 스크롤 위치를 계산합니다.
현재 스크롤 위치를 .parallax__info 클래스를 가진 요소 내부의 span 요소에 표시합니다.
.parallax__item 클래스를 가진 요소들을 순회하면서, 현재 스크롤 위치가 각 요소의 위치보다 크면(offsetTop 속성 사용), 해당 요소의 순서에 맞는 점(.parallax__dot li 요소 중 :nth-child() 선택자로 선택)을 활성화(active 클래스 추가)합니다.