parallaxEffect07 - 리빌 효과

개요

스크롤 값에 맞추어서 이미지와 글귀가 조금 세련되게(?) 드러나게 하였다

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 reveal">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal">나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.</p>
        </section>

효과를 주고 싶은 class에 reveal, reveal-RTL 등과 같은 것들을 추가하였다

CSS 구성

1. opacity 적용

 - 서서히 나타나는 효과

.reveal > span,
.reveal > div {
    opacity: 0;
}

.reveal.show > span,
.reveal.show > div {
    animation: opacity 1s linear forwards;
}

@keyframes opacity {
    0% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 1;}
    100% {opacity: 1;}
}

2. reveal 적용 

 - 왼쪽에서 나타났다가 오른쪽으로 사라짐

.reveal::before{
    content: '';
    position: absolute;
    right: 0; top: 0; 
    width: 0%; height: 100%;
    background: #fff;
    z-index: 1;
}

.reveal.show::before {
    animation: reveal 1s linear forwards;
}

@keyframes reveal {
    0% {width: 0%; left: 0;}
    50% {width: 100%; left: 0;}
    80% {width: 100%; left: 0;}
    100% {width: 0; left: 100%;}
}

3. 그 외의 효과

 - reveal-RTL : 오른쪽에서 나타났다가 왼쪽으로 사라짐

 - reveal-TTB : 위쪽에서 나타났다가 아래쪽으로 사라짐

 - reveal-BTT : 아래쪽에서 나타났다가 위쪽으로 사라짐

.reveal.reveal-RTL.show::before {
    animation: reveal-RTL 1s linear forwards;
}

.reveal.reveal-TTB.show::before {
    animation: reveal-TTB 1s linear forwards;
}

.reveal.reveal-BTT.show::before {
    animation: reveal-BTT 1s linear forwards;
}

@keyframes reveal-RTL {
    0% {width: 0%; right: 0;}
    50% {width: 100%; right: 0;}
    80% {width: 100%; right: 0;}
    100% {width: 0; right: 100%;}
}

@keyframes reveal-TTB {
    0% {width: 100%; height: 0%; top: 0;}
    50% {width: 100%; height: 100%; top: 0;}
    80% {width: 100%; height: 100%; top: 0;}
    100% {width: 100%; height: 0%; top: 100%;}
}

@keyframes reveal-BTT {
    0% {width: 100%; height: 0%; bottom: 0; top: 100%;}
    50% {width: 100%; height: 100%; bottom: 0; top: 0;}
    80% {width: 100%; height: 100%; bottom: 0;}
    100% {width: 100%; height: 0%; bottom: 100%;}
}

4. 박스 2개 사용

after, delay 사용

.reveal.reveal-two::after{
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 0; height: 100%;
    z-index: 1;
    background: grey;
}

.reveal.show::after{
    animation: reveal 1000ms 300ms linear forwards;
}

.reveal.reveal-RTL.show::after{
    animation: reveal-RTL 1000ms 300ms linear forwards;
}

.reveal.reveal-TTB.show::after{
    animation: reveal-TTB 1000ms 300ms linear forwards;
}

.reveal.reveal-BTT.show::after{
    animation: reveal-BTT 1000ms 300ms linear forwards;
}

JS 구성

1. 글자를 span으로 감싸주자

document.querySelectorAll(".content__item__desc").forEach(el => {
    let spanText = el.innerText;
    let spanWrap = "<span>" + spanText + "</span>";
    el.innerHTML = spanWrap;
})

2. 스크롤이 될 때 reveal이 붙은 클래스에만 show를 추가하도록 하자

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

    const reveal = document.querySelectorAll(".reveal");

    reveal.forEach(el => {
        let revealOffset = el.offsetTop + el.parentElement.offsetTop;
        let revealDelay = el.dataset.delay;
        if (scrollTop >= revealOffset - window.innerHeight/2){
            if(revealDelay == undefined){
                el.classList.add("show");
            } else {
                setTimeout(() => {
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    }) 
    requestAnimationFrame(scroll);
}
scroll();

 

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