Parallax Effect 스크롤링 효과 - 텍스트 효과

 

	//글씨 쪼개기
        document.querySelectorAll(".parallax__cont__desc").forEach(desc => {
            let splitText = desc.innerText;
            let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>"); 
            splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
            desc.innerHTML = splitWrap;
            desc.setAttribute("aria-label", splitText); //setAttribute - 속성을 넣어줌
        })


        function scroll(){
            //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

            // document.querySelectorAll(".content__item").forEach(item => {
            //     if(scrollTop >= item.offsetTop){
            //         item.querySelector(".parallax__cont__desc").classList.add("show");
            //     }
            // })

            document.querySelectorAll(".content__item").forEach(item => {
                if(scrollTop > item.offsetTop){
                    item.querySelectorAll(".parallax__cont__desc span").forEach((span, index) => {
                        //setTimeout을 사용하여 span에 클래스 show를 0.05초 간격으로 붙임
                        setTimeout(() => {
                            span.classList.add("show");
                        }, 50 * (index+1))
                    })
                }
            })

            requestAnimationFrame(scroll)
        }
        scroll();

	/* option */
        /* 순차적으로 나타내기 */
        .parallax__cont__desc span {
            opacity: 0;
            transition: all 0.33s ease-in-out;
        }
        .parallax__cont__desc span.show {
            opacity: 1;
        }
            
        /*  section2 */
        #section2 .parallax__cont__desc span {
            opacity: 0;
            display: inline-block;
            min-width: 1.4vw;
            transform: translateY(70px) rotate(10deg);
            transition: all 0.33s cubic-bezier(0, 0.52, 0.58, 1);
        }
        #section2 .parallax__cont__desc span.show {
            opacity: 1;
            transform: translateX(0);
        }
        
        ----------section9번까지 각각의 애니메이션 CSS설정
        
        /*  section9 */
        #section9 .parallax__cont__desc span {
            display: inline-block;
            min-width: 1.4vw;
            opacity: 0;
        }
        #section9 .parallax__cont__desc span.show {
            opacity: 1;
            animation: bounce 1s;
        }
        @keyframes bounce {
            0%,20%,53%,100% {
                animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                transform: translateZ(0)
            }
            40%,43% {
                animation-timing-function: cubic-bezier(.755, .05, .855, .06);
                transform: translate3d(0, -30px, 0) scaleY(1.1)
            }
            70% {
                animation-timing-function: cubic-bezier(.755, .05, .855, .06);
                transform: translate3d(0, -15px, 0) scaleY(1.05)
            }
            80% {
                transition-timing-function: cubic-bezier(.215, .61, .355, 1);
                transform: translateZ(0) scaleY(.95)
            }
            90% {
                transform: translate3d(0, -4px, 0) scaleY(1.02)
            }
        }