반응형
패럴랙스 (parallax) 이펙트 ( 3 ) (scrollTop , offsetTop, innerHeight)
VSCode
<!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>패럴랙스 이펙트04</title>
<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.4s 0.1s ease-out;
}
#parallax__wrap > section.show .parallax__item__num {
opacity: 0.07;
transform: translateY(0);
}
#parallax__wrap > section .parallax__item__title {
opacity: 0;
transform: translateX(-400px);
transition: all 0.4s 0.3s ease-out;
}
#parallax__wrap > section:nth-child(even) .parallax__item__title {
opacity: 0;
transform: translateX(400px);
transition: all 0.4s 0.3s ease-out;
}
#parallax__wrap > section.show .parallax__item__title {
opacity: 1;
transform: translateX(0);
}
#parallax__wrap > section .parallax__item__img {
opacity: 0;
transform: scale(0.1);
transition: all 0.4s 0.6s ease-out;
}
#parallax__wrap > section.show .parallax__item__img {
opacity: 1;
transform: scale(1);
transform: translateX(0);
}
#parallax__wrap > section .parallax__item__desc {
opacity: 0;
transform: translateX(1600px);
transition: all 0.4s 0.9s ease-out;
}
#parallax__wrap > section:nth-child(even) .parallax__item__desc {
opacity: 0;
transform: translateX(-1600px);
transition: all 0.4s 0.9s ease-out;
}
#parallax__wrap > section.show .parallax__item__desc {
opacity: 1;
transform: translateX(0);
}
</style>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
</head>
<body class="bg01 font05">
<header id="header">
<h1><a href="https://ehcjswo.github.io/web2023/index.html">Javascript parallax Effect01</a></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 id="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 -->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
<script>
function scroll(){
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelectorAll(".parallax__item").forEach(item => {
if(scrollTop > item.offsetTop - window.innerHeight/2){
item.classList.add("show");
} else {
item.classList.remove("show");
}
});
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>
패럴랙스 효과는 스크롤 이벤트를 이용하여 웹 페이지 요소들을 다양한 방식으로 움직이거나 변형시키는 기술입니다.
이 코드에서는 scroll() 함수를 통해 스크롤 이벤트를 처리하고, 각 섹션 내의 이미지와 텍스트를 움직이는 애니메이션 효과를 부여합니다.
script
<script>
function scroll(){
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelectorAll(".parallax__item").forEach(item => {
if(scrollTop > item.offsetTop - window.innerHeight/2){
item.classList.add("show");
} else {
item.classList.remove("show");
}
});
requestAnimationFrame(scroll);
}
scroll();
</script>
scroll() 함수가 페이지 스크롤 이벤트 발생 시 호출됩니다. 이 함수는 현재 스크롤 위치를 확인하기 위해 window.pageYOffset 또는 window.scrollY 값을 사용합니다.
다음으로, document.querySelectorAll(".parallax__item")은 문서 내의 모든 요소 중에서 "parallax__item" 클래스를 가진 요소들을 선택합니다. 이들 요소에 대해 반복문을 실행합니다.
반복문 내부에서는 if(scrollTop > item.offsetTop - window.innerHeight/2) 문장을 사용하여 현재 스크롤 위치가 해당 요소의 상단부터 창의 높이의 절반만큼 떨어진 위치보다 큰지 확인합니다. 즉, 요소가 화면 중앙을 지나쳤는지를 판단합니다. 만약 조건이 참이라면 item.classList.add("show")를 사용하여 해당 요소에 "show" 클래스를 추가합니다. 그렇지 않으면 item.classList.remove("show")를 사용하여 "show" 클래스를 제거합니다.
마지막으로, requestAnimationFrame(scroll)을 사용하여 애니메이션 프레임마다 scroll() 함수가 호출되도록 설정합니다. 이렇게 함으로써 스크롤 이벤트에 따라 요소들이 부드럽게 나타나거나 사라지는 애니메이션 효과를 제공합니다.
이 코드를 사용하면 "parallax__item" 클래스를 가진 요소들을 페이지 스크롤에 따라 나타나게 할 수 있습니다. 예를 들어, 이미지나 텍스트 요소를 페이지를 스크롤함에 따라 부드럽게 페이드인하거나 슬라이드인하는 효과를 줄 수 있습니다.