가로 효과
전체 소스
<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);
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>1. const parallaxCont = document.querySelector(".parallaxs__wrap");: parallaxs__wrap 클래스를 가진 요소를 선택하여 parallaxCont 변수에 할당합니다. 이 요소는 패럴랙스 효과를 적용할 부분을 감싸는 컨테이너입니다.
2. let scrollTop = window.pageYOffset;: scrollTop 변수에 현재 스크롤의 수직 위치를 저장합니다.
3. let parallaxWidth = parallaxCont.offsetWidth;: parallaxCont 요소의 너비를 저장하는 parallaxWidth 변수를 생성합니다.
4. document.body.style.height = parallaxWidth + 'px';: 문서의 <body> 요소의 높이를 parallaxWidth로 설정하여 스크롤 가능한 영역의 높이를 조정합니다.
5. let viewWidth = parallaxWidth - window.innerWidth;: viewWidth 변수에 스크롤 가능한 영역의 너비와 브라우저 창의 너비 차이를 저장합니다.
6. let viewHeight = parallaxWidth - window.innerHeight;: viewHeight 변수에 스크롤 가능한 영역의 높이와 브라우저 창의 높이 차이를 저장합니다.
7. let goLeft = scrollTop * (viewWidth / viewHeight);: goLeft 변수에 스크롤 위치에 따라 수평으로 이동할 거리를 계산하여 저장합니다.
8. gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});: GSAP 라이브러리의 to 메서드를 사용하여 parallaxCont 요소를 수평으로 -goLeft 만큼 이동시킵니다. ease: "power2.out"는 이동 애니메이션의 가속도를 설정합니다.
9. document.querySelector(".scroll span").innerText = Math.round(scrollTop);: 스크롤 위치를 나타내는 요소의 내용을 현재 scrollTop 값으로 설정합니다.
10. requestAnimationFrame(scroll);: scroll 함수를 반복적으로 호출하여 부드러운 스크롤 이동을 구현합니다.
가로/세로 효과
전체 소스
SCRIPT
<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 - document.querySelector("#section4").offsetTop;
if(scrollTop >= section4){
gsap.to(".sec4", {left: -goLeft, ease: "linear"})
}
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>1. const section4 = document.querySelector("#section4").offsetTop;: #section4 요소의 offsetTop 속성을 사용하여 해당 섹션의 위쪽으로부터의 거리를 변수 section4에 저장합니다.
2. let scrollTop = window.pageYOffset;: window.pageYOffset 속성을 사용하여 현재 스크롤의 Y 축 위치를 변수 scrollTop에 저장합니다.
3. let goLeft = scrollTop - document.querySelector("#section4").offsetTop;: scrollTop에서 #section4 요소의 offsetTop을 뺀 값을 변수 goLeft에 저장합니다. 이를 통해 스크롤 위치에 따라 #section4 .sec4 요소가 왼쪽으로 이동하는 효과를 구현할 수 있습니다.
4. if(scrollTop >= section4) { ... }: scrollTop이 section4보다 크거나 같을 경우에만 다음 동작을 수행합니다. 즉, 사용자가 스크롤하여 #section4 섹션에 도달했을 때 실행됩니다.
5. gsap.to(".sec4", {left: -goLeft, ease: "linear"}): GSAP 라이브러리를 사용하여 .sec4 요소를 왼쪽으로 -goLeft만큼 이동시킵니다. ease: "linear"는 선형적인 이동을 의미합니다.
6. document.querySelector(".scroll span").innerText = Math.round(scrollTop);: .scroll 클래스 내부의 span 요소의 텍스트를 현재 스크롤 위치인 scrollTop의 값으로 설정합니다.
7. requestAnimationFrame(scroll);: scroll 함수를 다음 애니메이션 프레임으로 예약하여 지속적으로 호출합니다. 이렇게 함으로써 스크롤 이벤트를 실시간으로 감지하고 원하는 동작을 수행할 수 있습니다.