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>패럴랙스 이펙트03</title>
<link rel="stylesheet" href="css/parallax.css">
<link rel="stylesheet" href="css/reset.css">
<style>
.parallax__nav {
top: -100px;
transition: all 0.6s;
}
.parallax__nav.show {
top: 10px;
}
</style>
</head>
<body class="img12 bg01 font02">
<header id="header">
<h1>Javascript Parallax Effect03</h1>
<p>패럴랙스 이펙트 : 숨김 메뉴 / 탑 버튼</p>
<ul>
<li><a href="parallaxEffect01.html">1</a></li>
<li><a href="parallaxEffect02.html">2</a></li>
<li class="active"><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__nav show">
<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 -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallax__info -->
<div class="parallax__top show"><a href="#header">Top</a></div>
script 코드
//탑버튼
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.screenY;
if(scrollTop > document.body.scrollHeight - 1000){
document.querySelector(".parallax__top").classList.add("show");
} else {
document.querySelector(".parallax__top").classList.remove("show");
}
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
});- document.querySelector(".parallax__top a")는 탑 버튼의 하위 a 요소를 선택합니다.
- addEventListener() 메서드를 사용하여 click 이벤트를 감지하면 내부 함수가 호출됩니다. 이때 e.preventDefault()는 기본 이벤트를 취소하여 요소의 링크 기능을 방지합니다.
- window.scrollTo()는 페이지 스크롤 위치를 설정하는 메서드입니다. 이 메서드는 top 속성과 behavior 속성을 인수로 받습니다. top 속성은 스크롤 위치를 지정하며, 이 경우 0으로 설정하여 페이지 상단으로 스크롤합니다. behavior 속성은 스크롤 애니메이션을 지정하며, 이 경우 "smooth"로 설정하여 스무스한 애니메이션 효과를 적용합니다.
//탑 버튼 애니메이션
document.querySelector(".parallax__top a").addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: "smooth"
});
});- document.querySelector(".parallax__top a")는 탑 버튼의 하위 a 요소를 선택합니다.
- addEventListener() 메서드를 사용하여 click 이벤트를 감지하면 내부 함수가 호출됩니다. 이때 e.preventDefault()는 기본 이벤트를 취소하여 요소의 링크 기능을 방지합니다.
- window.scrollTo()는 페이지 스크롤 위치를 설정하는 메서드입니다. 이 메서드는 top 속성과 behavior 속성을 인수로 받습니다. top 속성은 스크롤 위치를 지정하며, 이 경우 0으로 설정하여 페이지 상단으로 스크롤합니다. behavior 속성은 스크롤 애니메이션을 지정하며, 이 경우 "smooth"로 설정하여 스무스한 애니메이션 효과를 적용합니다.
//02. 메뉴
let nowScroll = true;
let lastScroll = 0;
function scrollProgress (){
nowScroll = true;
setInterval(() => {
if(nowScroll){
nowScroll = false;
hasScroll();
}
}, 300);
}
function hasScroll (){
let scrollTop = window.pageYOffset || window.scrollY;
if(scrollTop < lastScroll){
document.querySelector(".parallax__nav").classList.add("show");
} else {
document.querySelector(".parallax__nav").classList.remove("show");
}
lastScroll = scrollTop;
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
}
window.addEventListener("scroll", scrollProgress);- let nowScroll = true;는 현재 스크롤 중인지 여부를 저장하는 변수입니다.
- let lastScroll = 0;은 이전 스크롤 위치를 저장하는 변수입니다.
- function scrollProgress (){...} 함수는 setInterval() 함수를 사용하여 0.3초마다 스크롤 중인지 여부를 확인하는 함수입니다. setInterval() 함수는 일정한 시간 간격으로 함수를 반복 실행합니다.
- function hasScroll (){...} 함수는 현재 스크롤 위치를 가져와 이전 스크롤 위치와 비교하여 스크롤 방향을 결정하고, .parallax__nav 요소에 show 클래스를 추가하거나 제거합니다.
- 현재 스크롤 위치를 lastScroll 변수에 저장하고, .scroll 요소의 자식 span 요소에 현재 스크롤 위치를 표시합니다.
- window.addEventListener("scroll", scrollProgress);는 스크롤 이벤트가 발생할 때 scrollProgress() 함수가 호출되도록 등록하는 코드입니다.
반응형
