반응형
패럴랙스 (parallax) 이펙트 ( 2 ) (제이쿼리, scrollTop , offsetTop)
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>패럴랙스 이펙트05</title>
<style>
</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>패럴랙스 이펙트 : 이질감 효과(3d효과)</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><a href="parallaxEffect04.html">4</a></li>
<li class="active"><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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollHeight;
let scrollLeft = window.pageXOffset || document.documentElement.scrollWidth;
document.querySelectorAll(".parallax__item").forEach(item => {
const target1 = item.querySelector(".parallax__item__img");
const target2 = item.querySelector(".parallax__item__desc");
let offset1 = (scrollTop - item.offsetTop) * 0.3;
let offset2 = (scrollTop - item.offsetTop) * 0.15;
let offset3 = (scrollTop - item.offsetTop) * 0.1;
// target1.style.transform = `translate(${offset3}px, ${-offset1}px)`;
// target1.style.transform = `translateX(${-offset2}px)`;
target2.style.transform = `translateX(${offset2}px)`;
gsap.to(target1, {duration: .3, y: offset1, x: offset3, ease: "power4.out"});
gsap.to(target2, {duration: .3, y: offset2, x: offset3, ease: "expo.out"});
});
requestAnimationFrame(scroll);
}
scroll()
</script>
</body>
</html>
패럴랙스 효과는 스크롤 이벤트를 이용하여 웹 페이지 요소들을 다양한 방식으로 움직이거나 변형시키는 기술입니다.
이 코드에서는 scroll() 함수를 통해 스크롤 이벤트를 처리하고, 각 섹션 내의 이미지와 텍스트를 움직이는 애니메이션 효과를 부여합니다.
script
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollHeight;
let scrollLeft = window.pageXOffset || document.documentElement.scrollWidth;
document.querySelectorAll(".parallax__item").forEach(item => {
const target1 = item.querySelector(".parallax__item__img");
const target2 = item.querySelector(".parallax__item__desc");
let offset1 = (scrollTop - item.offsetTop) * 0.3;
let offset2 = (scrollTop - item.offsetTop) * 0.15;
let offset3 = (scrollTop - item.offsetTop) * 0.1;
// target1.style.transform = `translate(${offset3}px, ${-offset1}px)`;
// target1.style.transform = `translateX(${-offset2}px)`;
target2.style.transform = `translateX(${offset2}px)`;
gsap.to(target1, {duration: .3, y: offset1, x: offset3, ease: "power4.out"});
gsap.to(target2, {duration: .3, y: offset2, x: offset3, ease: "expo.out"});
});
requestAnimationFrame(scroll);
}
scroll()
</script>
scroll() 함수: 스크롤 이벤트를 처리하는 함수입니다. window.pageYOffset를 통해 수직 스크롤 위치를 가져옵니다. document.querySelectorAll(".parallax__item")를 사용하여 클래스가 "parallax__item"인 모든 요소들을 선택합니다. 각각의 요소에 대해 다음 동작을 수행합니다:
- item.offsetTop: 현재 요소의 상단 위치를 가져옵니다.
- offset1, offset2, offset3: 스크롤 위치에 따라 이미지와 텍스트에 적용할 이동 거리 값을 계산합니다.
- gsap.to(): GSAP 라이브러리의 to() 메서드를 사용하여 애니메이션 효과를 부여합니다. target1과 target2를 대상으로 각각 offset1, offset2, offset3 값을 이용하여 움직임을 적용합니다.
requestAnimationFrame(scroll): 애니메이션을 부드럽게 처리하기 위해 scroll() 함수를 호출하고, 다음 프레임에 대한 애니메이션을 요청합니다. 이렇게 함으로써 스크롤에 따라 애니메이션 효과가 지속적으로 적용됩니다.
이 코드는 스크롤 이벤트에 반응하여 섹션 내의 이미지와 텍스트를 부드럽게 이동시키는 패럴랙스 효과를 구현합니다. GSAP 라이브러리를 사용하여 애니메이션을 적용하고, requestAnimationFrame을 이용하여 부드러운 애니메이션 효과를 제공합니다.