QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
패럴랙스 이펙트란?
패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다.
웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다.
패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선하고 웹 페이지를 더욱 흥미롭고 동적으로 만들어줍니다. 하지만, 지나친 사용은 사용자 경험을 해치고 성능 저하를 일으킬 수 있으므로 적절한 사용이 필요합니다.
패럴랙스 이펙트 사이트 코드
<body class="img12 bg01 font02">
<header id="header">
<h1>Javascript Parallax Effect04</h1>
<p>패럴랙스 이펙트 : 나타나기</p>
<ul>
<li><a href="parallaxEffect01.html">1</a></li>
<li><a href="parallaxEffect02.html">2</a></li>
<li><a href="parallaxEffect03.html">3</a></li>
<li class="active"><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 -->
<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 -->
CSS
<style>
/* 한번에 나타나기 */
/* .parallax__wrap > section {
opacity: 0;
transition: all 1s;
}
.parallax__wrap > section.show {
opacity: 1;
} */
/* 개별적으로 나타나기 */
.parallax__wrap > section .parallax__item__num {
opacity: 0;
transform: translateY(200px);
transition: all 0.6s 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.parallax__wrap > section .parallax__item__title {
opacity: 0;
transform: translateX(-100px);
transition: all 0.6s 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.parallax__wrap > section .parallax__item__imgWrap {
opacity: 0;
transform: translateY(200px) rotate(30deg) skew(20deg);
transition: all 0.6s 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.parallax__wrap > section .parallax__item__desc {
opacity: 0;
transform: translateX(200px);
transition: all 0.6s 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.parallax__wrap > section:nth-child(even) .parallax__item__title {
transform: translateX(100px);
}
.parallax__wrap > section:nth-child(even) .parallax__item__desc {
transform: translateX(200px);
}
.parallax__wrap > section.show .parallax__item__num {
transform: translateY(0);
opacity: 0.07;
}
.parallax__wrap > section.show .parallax__item__title {
transform: translateX(0);
opacity: 1;
}
.parallax__wrap > section.show .parallax__item__imgWrap {
transform: translateY(0) rotate(0) skew(0);
opacity: 1;
}
.parallax__wrap > section.show .parallax__item__desc {
transform: translateX(0);
opacity: 1;
}
</style>
script 코드
<script>
function scroll(){
let scrollTop = window.pageYOffset || window.screenY;
document.querySelectorAll(".parallax__item").forEach(item => {
if(scrollTop > item.offsetTop - window.innerHeight/2){
item.classList.add("show");
}
});
requestAnimationFrame(scroll);
}
scroll();
</script>- window.pageYOffset 또는 window.screenY를 사용하여 현재 스크롤 위치를 계산하고, document.querySelectorAll(".parallax__item")를 사용하여 HTML 문서에서 .parallax__item 클래스를 가진 모든 요소를 선택합니다.
- 각 요소에 대해 offsetTop을 사용하여 요소의 상단 부분의 위치를 계산하고, window.innerHeight/2를 사용하여 브라우저 뷰포트의 높이의 절반을 계산합니다. 이렇게 계산한 값과 현재 스크롤 위치를 비교하여 해당 요소가 뷰포트 내부에 있는지 확인합니다.
- 만약 요소가 뷰포트 내부에 있다면, 해당 요소에 .show 클래스를 추가합니다. 이렇게 함으로써 해당 요소가 보이도록 스타일을 적용할 수 있습니다.
- requestAnimationFrame을 사용하여 다음 프레임이 렌더링되기 전에 함수를 반복 호출합니다. 이렇게 함으로써 페이지 스크롤 이벤트를 처리하면서 부드럽게 애니메이션을 적용할 수 있습니다.
반응형
