“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 패럴랙스 가로/세로효과
💜 parallax Effect09
<body class="img01 bg01 font10">
<header id="header">
<h1>Javascript Parallax Effect09</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><a href="parallaxEffect06.html">8</a></li>
<li class="active"><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">
<div class="sec4">
<article><span class="parallaxs__item__num">04-1</span></article>
<article><span class="parallaxs__item__num">04-2</span></article>
<article><span class="parallaxs__item__num">04-3</span></article>
</div>
</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 {
}
.parallaxs__item {
width: 100vw;
height: 100vh;
position: relative;
}
#section1 {background-color: #111; z-index: 7000;}
#section2 {background-color: #222; z-index: 6000;}
#section3 {background-color: #333; z-index: 5000;}
#section4 {
background-color: #444;
height: 400vh;
z-index: 4000;
}
#section4 .sec4 {
position: fixed;
left: 0;
top: 0;
width: 400vh;
height: 100%;
display: flex;
}
#section4 .sec4 article {
width: 200vh;
height: 100vh;
position: relative;
}
#section4 .sec4 article:nth-child(1) {background-color: rgba(255, 95, 95);}
#section4 .sec4 article:nth-child(2) {background-color: rgba(255, 195, 95);}
#section4 .sec4 article:nth-child(3) {background-color: rgba(155, 195, 95);}
#section5 {background-color: #555; z-index: 5000;}
#section6 {background-color: #555; z-index: 6000;}
#section7 {background-color: #666; z-index: 7000;}
#section8 {background-color: #777; z-index: 8000;}
#section9 {background-color: #888; z-index: 9000;}
.parallaxs__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}
.parallaxs__info {
z-index: 10000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
const section4 = document.querySelector("#section4").offsetTop;
function scroll(){
let scrollTop = window.pageYOffset;
let goLeft = scrollTop - section4;
if(scrollTop >= section4) {
gsap.to(".sec4", {left: -goLeft, ease: "linear"})
}
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>그 후에는 scroll() 함수가 호출될 때마다 현재 스크롤 위치를 scrollTop 변수에 저장합니다. 그리고 scrollTop 값과 section4 값을 비교하여 패럴랙스 효과로 움직일 거리를 계산합니다. 계산식은 scrollTop - section4로, 특정 섹션의 위치에 도달한 후에는 스크롤 위치와 섹션 위치의 차이만큼 goLeft 변수에 할당됩니다.
조건문을 통해 현재 스크롤 위치가 section4 이상인 경우에만 패럴랙스 효과가 적용되도록 설정되어 있습니다. 만약 현재 스크롤 위치가 section4보다 작은 경우 패럴랙스 효과는 적용되지 않습니다.
이후 gsap.to()를 사용하여 .sec4라는 클래스를 가진 요소의 left 속성을 -goLeft로 애니메이션화합니다. 애니메이션의 이징은 "linear"로 설정되어 있으며, goLeft 값은 스크롤 위치에 따라 요소가 좌측으로 이동합니다.
마지막으로, 스크롤 위치를 나타내는 숫자를 업데이트하고 있고, requestAnimationFrame()을 사용하여 scroll() 함수를 반복 호출하여 패럴랙스 효과가 지속적으로 적용되도록 합니다.
이 코드는 특정 섹션에 도달했을 때에만 패럴랙스 효과가 적용되도록 구현된 예시입니다. 이 외에도 GSAP 라이브러리를 사용하여 다양한 애니메이션 효과를 구현할 수 있습니다. GSAP 문서를 참고하면 더 다양한 기능과 사용 방법을 확인할 수 있습니다.
반응형