페럴랙스 이펙트의 텍스트 효과를 알아보자!

페럴랙스 이펙트 : 텍스트 효과

이번에는 페럴랙스 이펙트 중에 텍스트 효과를 넣는 방법을 코딩해봤습니다.

HTML

HTML 코드는 사용해 줄 섹션 구간을 나눠주고 CSS와 스크립트를 이용하기위해 각각에 class로 이름을 지정해줍니다.
텍스트는 자신이 좋아하는 말이나..명언을...? 집어넣어주세여..

HTML CODE

<main id="parallax__cont">
    <div id="contents">
        <!-- section1 -->
        <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 split">니 인생은 너가 바꾸는거다.</p>
        </section>

        <!-- section2 -->
        <section id="section2" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">남 탓 하기 전에 너 자신을 봐라.</p>
        </section>

        <!-- section3 -->
        <section id="section3" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">알면서도 안하고 가만히 있으면 거지가 되면 된다.</p>
        </section>

        <!-- section4 -->
        <section id="section4" class="content__item">
            <span class="content__item__num">04</span>
            <h2 class="content__item__title">section4</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">남들은 너한테 큰 관심이 없다.</p>
        </section>

        <!-- section5 -->
        <section id="section5" class="content__item">
            <span class="content__item__num">05</span>
            <h2 class="content__item__title">section5</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">너 혼자 알아서 해라.</p>
        </section>

        <!-- section6 -->
        <section id="section6" class="content__item">
            <span class="content__item__num">06</span>
            <h2 class="content__item__title">section6</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다.</p>
        </section>

        <!-- section7 -->
        <section id="section7" class="content__item">
            <span class="content__item__num">07</span>
            <h2 class="content__item__title">section7</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">사회는 널 기다려주지 않는다.</p>
        </section>

        <!-- section8 -->
        <section id="section8" class="content__item">
            <span class="content__item__num">08</span>
            <h2 class="content__item__title">section8</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">힘 없는 정의는 무능이다.</p>
        </section>

        <!-- section9 -->
        <section id="section9" class="content__item">
            <span class="content__item__num">09</span>
            <h2 class="content__item__title">section9</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">객관적으로 너 자신을 봐라</p>
        </section>
    </div>
    <section id="parallaxType">
    </section>
</main>
<!-- //main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- aside -->

CSS

CSS는 각자가 원하는 디자인 스타일에 맞게 지정해줍시다.
이번 단위는 px가 아닌 vw를 사용해줬는데 vw는 반응형에서 px와는 맞게 작동하기에 vw를 사용해줬습니다.
vw : 웹에서 보이는 부분에만 값을 준 것이다.
또한, 각가 이미지에 nth-child를 이용해 이미지를 지정해줍니다.
nth-child : 형제 사이에 순서에 따라 요소를 선택할 수 있게 해줍니다.

CSS CODE

/* parallax__nav */
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    border-radius: 50px;
    transition: top, .4s ease;
}
#parallax__nav li {
    display: inline;
    margin: 0 5px;
}
#parallax__nav li a {
    display: inline-block;
    height: 30px;
    padding: 5px 20px;
    text-align: center;
    line-height: 30px;
}
#parallax__nav li.active a {
    background: #fff;
    color: #000;
    border-radius: 20px;
    box-sizing: content-box;
}
#parallax__cont {
    max-width: 1600px;
    width: 98%;
    margin: 0 auto;
    /* background-color: rgba(255, 255, 255, 0.1); */
}
.content__item {
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    /* background-color: rgba(255, 255, 255, 0.3); */
    text-align: left;
    margin-right: 0;
    position: relative;
    padding-top: 14vw;
}
.content__item:nth-child(even) {
    margin-left: 0;
    text-align: right;
}
.content__item__num {
    font-size: 35vw;
    font-family: "Lato";
    font-weight: 100;
    position: absolute;
    left: -5vw;
    top: -10vw;
    opacity: 0.2;
    z-index: -2;
}
.content__item:nth-child(even) .content__item__num {
    left: auto;
    right: -5vw;
}
.content__item__title {
    font-weight: 500;
    text-transform: capitalize;
}
.content__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: -1;
}
.content__item__img {
    position: absolute;
    background: url(../assets/img/slide10.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 125%;
    height: 125%;
    left: -5%;
    top: -5%;
    filter: saturate(0%);
    transition: all 1s;
}
.content__item:nth-child(1) .content__item__img {
    background-image: url(../assets/img/slide01.jpg);
}
.content__item:nth-child(2) .content__item__img {
    background-image: url(../assets/img/slide02.jpg);
}
.content__item:nth-child(3) .content__item__img {
    background-image: url(../assets/img/slide03.jpg);
}
.content__item:nth-child(4) .content__item__img {
    background-image: url(../assets/img/slide04.jpg);
}
.content__item:nth-child(5) .content__item__img {
    background-image: url(../assets/img/slide05.jpg);
}
.content__item:nth-child(6) .content__item__img {
    background-image: url(../assets/img/slide06.jpg);
}
.content__item:nth-child(7) .content__item__img {
    background-image: url(../assets/img/slide07.jpg);
}
.content__item:nth-child(8) .content__item__img {
    background-image: url(../assets/img/slide08.jpg);
}
.content__item:nth-child(9) .content__item__img {
    background-image: url(../assets/img/slide09.jpg);
}
.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -5vw;
    margin-left: -4vw;
    word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
    margin-left: auto;
    margin-right: -4vw;
}
#parallax__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}
.parallax__info li, .scrollTop {
    line-height: 1.4;
}

@media (max-width: 800px) {
    #parallax__cont {
        margin-top: 70vw;
    }
    #parallax__nav {
        padding: 10px;
        right: auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.8);
    }
    #parallax__nav li {
        display: block;
        margin: 5px;
    }
    #parallax__nav li a {
        font-size: 14px;
        padding: 5px;
        border-radius: 5px;
        height: auto;
        line-height: 1.4;
    }
    #parallax__nav li.active a {
        border-radius: 10px;
    }
    #parallax__info {
        left: 10px;
        bottom: 10px;
    }
}

SCRIPT

이번 스크립트는 각 글씨에 움직임을 설정해주도록 하겠습니다.

1. HTML에서 지정해준 split 클래스에 forEach 사용하며 innerText 이용해 요소에 텍스트를 설정해줍니다.
2. splitText로 선언한 변수에 또 따로 span으로 나누어 주어 css효과를 주기 위해 문자열 메서드인 split와 배열 메서드인 join사용하여 각 한글자에 span을 지정해줍니다.
또한, 웹 표준을 지키기 위하여 aria-hidden='true'도 같이 지정해줍니다. 각 시작과 끝은 메서드가 설정되지 않기에 splitWrap에서 span을 반대로 지정해줍니다.
3. splitWrap에 시작과 끝에 span을 선언해줍니다.
4. 선언한 splitWrap를 text.innerHTML에 대입해줍니다. 마찬가지로 웹표준을 위해 setAttribute()사용하여 속성 값을 지정해줍니다. 5. 마우스 스크롤시에 지정된 좌표 값에 도달하는 스크립트는 전 이펙트들과 비슷한 형식으로 진행합니다.

SCRIPT CODE

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

function scroll() {
    let scrollTop = window.scrollY;

    document.querySelector("#parallax__info .scroll").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach(item => {
        if(scrollTop >= item.offsetTop) {
            item.querySelectorAll(".split span").forEach((span, index) => {
                span.classList.add("show");
                span.style.transitionDelay = `${index * 50}ms`
            })
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

CODE GO

RESULT

SITE GO