JAVASCRIPT

패럴렉스 이펙트 가로 효과, 가로/세로 효과

이미사용 2023. 5. 31. 23:44
명언
-
728x90
반응형

 가로 효과

전체 소스

        <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 함수를 다음 애니메이션 프레임으로 예약하여 지속적으로 호출합니다. 이렇게 함으로써 스크롤 이벤트를 실시간으로 감지하고 원하는 동작을 수행할 수 있습니다.