QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
패럴랙스 이펙트란?
패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다.
웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다.
패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선하고 웹 페이지를 더욱 흥미롭고 동적으로 만들어줍니다. 하지만, 지나친 사용은 사용자 경험을 해치고 성능 저하를 일으킬 수 있으므로 적절한 사용이 필요합니다.
패럴랙스 이펙트 사이트 코드
<!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>
<style>
body::-webkit-scrollbar {
width: 8px; /* 스크롤바의 너비 */
}
body::-webkit-scrollbar-thumb {
height: 10%; /* 스크롤바의 길이 */
background: #8a8a8a; /* 스크롤바의 색상 */
border-radius: 10px;
}
body::-webkit-scrollbar-track {
background: rgba(176, 205, 252, 0.233); /*스크롤바 뒷 배경 색상*/
}
</style>
<link rel="stylesheet" href="css/parallax.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body class="img12 bg01 font02">
<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>
<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 -->
<div class="scrollBar"></div>
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallax__info -->
script 코드
<script>
//닷 메뉴 클릭 이동
document.querySelectorAll(".parallax__dot li a").forEach(dot => {
dot.addEventListener("click", e => {
e.preventDefault();
document.querySelector(dot.getAttribute("href")).scrollIntoView({behavior: "smooth"});
})
});
//scrollTop 값
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".parallax__info .scroll span").innerText = parseInt(scrollTop);
//p
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");
}
});
});
</script>- 페이지 내에 존재하는 "parallax__dot" 클래스를 가진 요소들 중에서 li 요소 안에 존재하는 a 태그들을 선택합니다. 그리고 선택한 a 태그들에 대하여 클릭 이벤트 리스너를 등록합니다.
- 각각의 a 태그에 대한 클릭 이벤트가 발생하면, 이벤트 리스너에서는 이벤트의 기본 동작을 막고(e.preventDefault();) 해당 a 태그의 href 속성 값을 가져와서 document.querySelector를 사용하여 해당 요소를 선택합니다.
- 선택된 요소에 대하여 scrollIntoView 메소드를 사용하여 부드러운 스크롤 애니메이션을 적용하여 해당 요소로 스크롤 이동시킵니다.
- 이벤트 리스너는 window 객체에 등록되어 있으며, 스크롤이 발생할 때마다 호출됩니다. 이벤트 리스너에서는 현재 스크롤의 위치를 가져와 변수 scrollTop에 저장합니다.
- window.pageYOffset 혹은 window.scrollY를 사용하여 스크롤 위치를 가져올 수 있습니다.
- 현재 스크롤 위치를 나타내는 정보를 업데이트합니다. 이 코드에서는 화면에 표시되는 정보 중에서 ".parallax__info .scroll span" 요소의 내용을 현재 scrollTop 값으로 변경합니다. 이때, parseInt() 함수를 사용하여 scrollTop 값을 정수형으로 변환합니다.
- 현재 스크롤 위치에 따라 메뉴 항목을 강조합니다. 이 코드에서는 ".parallax__item" 클래스를 가진 요소들을 forEach() 메소드를 사용하여 반복적으로 처리합니다.
- 각 ".parallax__item" 요소의 offsetTop 속성 값을 사용하여 요소의 위치를 가져옵니다. 이후, 현재 스크롤 위치인 scrollTop 값과 비교하여, 현재 위치에 해당하는 메뉴 항목에 "active" 클래스를 추가합니다.
반응형
