parallaxEffect06 - 텍스트 효과

개요

텍스트를 하나씩 올라오게 한다

쟤들을 하나씩 다 떼야 한다

 

HTML 구성

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">Section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.</p>
        </section>
        <!-- //section1 -->

자바스크립트를 통해 p 태그의 글자 하나하나를 떼어주고, 각각에 span태그를 붙여준다

 

JS 구성 : 글자 쪼개기

1. 글씨가 들어간 부분을 각각 선택합니다.

document.querySelectorAll(".content__item__desc").forEach(desc => {});

2. 변수를 선언합니다

splitText: desc의 내용을 선택합니다

splitWrap: 각각의 글자들 사이사이에 join()을 사용하여 스판태그를 넣어줍니다.

 

그리곤,

splitWrap 맨 앞과 맨 뒤에 스판 태그를 넣어줍니다.

        document.querySelectorAll(".content__item__desc").forEach(desc => {
            let splitText = desc.innerText;
            let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");
                splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
        });

3. splitWrap을 p태그에 넣어줍니다.

 그리고 웹표준성에 어긋나지 않게 해줍니다

        document.querySelectorAll(".content__item__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);
        });

 

JS 구성 : 스크롤 했을 때 나타나게 하기

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

    document.querySelectorAll(".content__item").forEach(item => {
        if(scrollTop > item.offsetTop -400){
            item.querySelectorAll(".content__item__desc span").forEach((span, index) => {
                setTimeout(() => {
                span.classList.add("show");
                }, 50 * (index + 1))
            })
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

여기서 눈 여겨 볼 점은 setTimeout을 사용하는 것이다

스크롤이 되었을 때 span 각각에다가show를 붙여주지만, 0.05간격으로 붙여준다

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/parallaxEffect06.html