Parallax Effect 06 - 텍스트 효과

let text = document.querySelectorAll(".content__item__desc");

text.forEach((el,i) => {
    let splitText = el.innerText;													// 글자들을 선택해서 변수로 저장
    let splitWrap = splitText.split('').join("</span><>span aria-hidden='true'>");		// 글자를 하나씩 쪼개고 
    splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";				// span으로 묶음
    el.innerHTML = splitWrap;													// 묶은것을 다시 출력해줌.
    el.setAttribute("aria-label", splitText)
})


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.querySelectorAll(".content__item__desc span").forEach((span,index) => {
                setTimeout(()=>{
                    span.classList.add("show");
                }, 50 * (index+1))
            })
        }
    })
    requestAnimationFrame(scroll)
}
scroll();

 

스크롤을 내릴때 각 이미지별로 글자가 한글자씩 출력되게 효과를 주었습니다.

여기서 포인트는 .split() 명령어를 통해 배열처리된 글자를 한글자씩 쪼개주고

.join()을 이용하여 쉽게 span처리 할 수 있게 만드는 것입니다.

나머지 css적인 부분과 스크립트는 이전 효과들과 동일합니다.

 

 

전체 사이트 보기