“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
자바스크립트 패럴랙스 가로 효과
💜 parallax Effect08
<body class="img01 bg01 font10">
<header id="header">
<h1>Javascript Parallax Effect08</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><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="parallaxEffect06.html">7</a></li>
<li class="active"><a href="parallaxEffect08.html">8</a></li>
<li><a href="parallaxEffect09.html">9</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="parallaxs__wrap">
<section id="section1" class="parallaxs__item">
<span class="parallaxs__item__num">01</span>
</section>
<!-- //section1 -->
<section id="section2" class="parallaxs__item">
<span class="parallaxs__item__num">02</span>
</section>
<!-- //section2 -->
<section id="section3" class="parallaxs__item">
<span class="parallaxs__item__num">03</span>
</section>
<!-- //section3 -->
<section id="section4" class="parallaxs__item">
<span class="parallaxs__item__num">04</span>
</section>
<!-- //section4 -->
<section id="section5" class="parallaxs__item">
<span class="parallaxs__item__num">05</span>
</section>
<!-- //section5 -->
<section id="section6" class="parallaxs__item">
<span class="parallaxs__item__num">06</span>
</section>
<!-- //section6 -->
<section id="section7" class="parallaxs__item">
<span class="parallaxs__item__num">07</span>
</section>
<!-- //section7 -->
<section id="section8" class="parallaxs__item">
<span class="parallaxs__item__num">08</span>
</section>
<!-- //section8 -->
<section id="section9" class="parallaxs__item">
<span class="parallaxs__item__num">09</span>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>ps</div>
</aside>
<!-- parallax__info -->#header {
position: fixed;
z-index: 10000;
}
.parallaxs__wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
}
.parallaxs__item {
width: 100vw;
height: 100vh;
position: relative;
}
#section1 {background-color: #111;}
#section2 {background-color: #222;}
#section3 {background-color: #333;}
#section4 {background-color: #444;}
#section5 {background-color: #555;}
#section7 {background-color: #666;}
#section8 {background-color: #777;}
#section9 {background-color: #888;}
.parallaxs__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
const parallaxCont = document.querySelector(".parallaxs__wrap");
function scroll(){
let scrollTop = window.pageYOffset;
let parallaxWidth = parallaxCont.offsetWidth;
document.body.style.height = parallaxWidth+ 'px';
let viewWidth = parallaxWidth - window.innerWidth;
let viewHeight = parallaxWidth - window.innerHeight;
let goLeft = scrollTop * (viewWidth / viewHeight);
console.log(parallaxWidth);
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>처음에는 parallaxCont 요소의 너비를 parallaxWidth 변수에 저장하고, 그 값을 document.body.style.height에 할당하여 페이지의 높이를 조정합니다. 이렇게 함으로써 스크롤 영역의 끝까지 스크롤해도 요소가 보이도록 합니다.
그 후에는 현재 스크롤 위치를 scrollTop 변수에 저장합니다. 그리고 뷰포트의 너비(window.innerWidth)와 높이(window.innerHeight)를 이용하여 뷰포트와 패럴랙스 요소의 차이를 계산합니다. 이를 viewWidth와 viewHeight 변수에 저장합니다.
그 다음은 goLeft 변수에 scrollTop 값을 이용하여 패럴랙스 효과로 움직일 거리를 계산합니다. 계산식은 (scrollTop * (viewWidth / viewHeight))로, 스크롤 위치에 따라 패럴랙스 요소가 좌우로 이동합니다.
마지막으로, gsap.to()를 사용하여 parallaxCont 요소의 left 속성을 -goLeft로 애니메이션화합니다. 이때 ease: "power2.out" 옵션은 애니메이션의 이징(easing)을 설정합니다. 이 코드에서는 GSAP 라이브러리를 사용하여 애니메이션 효과를 부드럽게 적용하고 있습니다.
또한 코드 마지막 부분에서는 스크롤 위치를 나타내는 숫자를 업데이트하고 있습니다. 이는 .scroll span 요소의 내용을 scrollTop 값에 따라 업데이트합니다.
requestAnimationFrame() 메서드를 사용하여 scroll() 함수를 반복 호출함으로써 스크롤 이벤트에 따라 패럴랙스 효과가 지속적으로 적용되도록 합니다.