스크롤 효과

텍스트 분리하ㄱㅣ

        //텍스트 분리하기
        // let text = document.querySelector("#section1 .parallax__item__desc");
        // let splitText = text.innerText;
        // let splitWrap = splitText.split('').join('</span><span>');
        // text.innerHTML = splitWrap = "<span>" + splitWrap + "</span>";

        //모든 텍스트 분리
        let text = document.querySelectorAll(".split").forEach(text => {
            let splitText = text.innerText;
            let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");
            text.innerHTML = splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
            text.setAttribute("aria-label", splitText);
        });

텍스트 분리하기 #section1 .parallax__item__desc의 글자들을 한 글자씩 분리 하려합니다.

#section1 .parallax__item__desc를 text로 정의 해줍니다.

text.innerText 를 사용해 splitText에 입력합니다.

그 후 입력된  splitText에 split메소드를 사용해 (' ') 빈 문자열 마다 분리하고 join메소드를 사용해 </span><span>을 넣어 줍니다. 그러면 맨 앞과 뒤를 제외 하고 문자 마다 <span></span>가 들어가고  맨 앞과 맨뒤는 "<span>" + splitWrap + "</span>" 를 사용해 붙여 줍니다.

다음은  #section1 .parallax__item__desc의 문장 뿐 아니라 모든 섹션의 문장을 분리 하는 방법입니다.

let text = document.querySelectorAll(".split") split 클래스가 붙은 모든 곳에 forEach를 사용해 위와 같은 방법으로 정의해줍니다. 그리고 웹표준을 위해 aria-hidden=ture를 붙여 줍니다.

 

이질감 효과 표현하기

      function scroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            document.querySelectorAll(".parallax__item").forEach(item => {
                const target1 = item.querySelector(".parallax__item__img");
                const target2 = item.querySelector(".parallax__item__desc");
                const target3 = item.querySelector(".parallax__item__num");

                let offset1 = (scrollTop - item.offsetTop) * 0.1;
                let offset2 = (scrollTop - item.offsetTop) * 0.15;
                let offset3 = (scrollTop - item.offsetTop) * 0.2;

                // target1.style.transform = `translateY(${offset2}px)`;
                // target2.style.transform = `translateX(${offset1}px)`;
                gsap.to(target1, {duration: .3, y: offset1});
                gsap.to(target2, {duration: .3, y: offset2});
                gsap.to(target3, {duration: .3, y: offset3, ease: "expo.out"});
            });

            requestAnimationFrame(scroll);
        }
        scroll()