패럴랙스 이펙트07

패럴랙스 이펙트 7

이번 패럴랙스 효과는 스크롤을 내리면 가림막이 먼저 나타났다가 사라지며 글씨와 이미지가 나타나는 효과입니다. 이런 효과를 리빌효과라고 합니다.

HTML 코드

이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. 이전 유형과 구조는 완전히 같습니다.

HTML 보기

<main id="parallax__cont">
    <div id="contents">
    <section id="section01" 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" data-delay="500">질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다.</p>
    </section>
    <!-- //section01 -->
        .
        .
        .
    </div>
</main>
<!-- main -->

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

CSS 코드

이번 패럴랙스는 가림막 애니메이션 효과를 주기 위해, 다양한 css애니메이션을 적용하였습니다.

CSS 보기

/* option */
.reveal > div,
.reveal > span {
    opacity: 0;
}
.reveal.show > div,
.reveal.show > span {
    animation: opacity 1s linear forwards;
}
.reveal {
    position: relative;
}
.reveal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #444;
    z-index: 1;
}
.reveal.reveal-TWO::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #333;
    z-index: 1;
}
/* 1개 */
.reveal.show::before {animation: reveal 1s;}
.reveal.reveal-RTL.show::before {animation: reveal-RTL 1s;}
.reveal.reveal-TTB.show::before {animation: reveal-TTB 1s;}
.reveal.reveal-BTT.show::before {animation: reveal-BTT 1s;}

/* 2개 */
.reveal.show::after {animation: reveal 1s 0.3s;}
.reveal.reveal-RTL.show::after {animation: reveal-RTL 1s 0.3s;}
.reveal.reveal-TTB.show::after {animation: reveal-TTB 1s 0.3s;}
.reveal.reveal-BTT.show::after {animation: reveal-BTT 1s 0.3s;}

@keyframes opacity {
    0% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes reveal {
    0% {width: 0; left: 0;}
    50% {width: 100%; left: 0;}
    80% {width: 100%; left: 0;}
    100% {width: 0; left: 100%;}
}
@keyframes reveal-RTL {
    0% {width: 0; right: 0; left: auto;}
    50% {width: 100%; right: 0; left: auto;}
    80% {width: 100%; right: 0; left: auto;}
    100% {width: 0; right: 100%; left: auto;}
}
@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: auto;}
    50% {width: 100%; height: 100%; bottom: 0; top: auto;}
    80% {width: 100%; height: 100%; bottom: 0; top: auto;}
    100% {width: 100%; height: 0; bottom: 100%; top: auto;}
}

스크립트 보기

/ reveal 클래스 자식에 글씨만 잇다면, 가상으로 span 태그를 만들어서 넣어주기
const descReveal = document.querySelectorAll("p.reveal");
// console.log(descReveal)
descReveal.forEach((el)=>{
    let splitText = el.innerText;
    // console.log(splitText)
    if(splitText){
        el.innerHTML = '<span>' + splitText + '</span>';
    }
})


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

    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){
        //     // console.log(revealOffset);
        //     el.classList.add("show");
        // }
        if(scrollTop > revealOffset - window.innerHeight){
            if(revealDelay == undefined){
                el.classList.add("show");
            } else {
                setTimeout(()=>{
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

> 완성 페이지 보기

원본 소스 보기