Parallax Effect 스크롤링 효과 - 리빌 효과

	//HTML에 클래스 reveal이 있으면 span 태그 넣어주기!
        document.querySelectorAll("p.reveal").forEach(desc => {
            let revealtext = desc.innerText;
            revealtext = "<span>" + revealtext + "</span>";
            desc.innerHTML = revealtext;
        })
      

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

        
           
            const reveal = document.querySelectorAll(".reveal");
            
            reveal.forEach(elem => {
                let revealOffset = elem.offsetTop + elem.parentElement.offsetTop;
                let revealDelay = elem.dataset.delay;

                // if(scrollTop >= revealOffset - window.innerHeight/2)
                //     elem.classList.add("show")

                if(scrollTop >= revealOffset - window.innerHeight/2){
                    if(revealDelay == undefined){
                        elem.classList.add("show");
                    } else {
                        setTimeout(() => {
                            elem.classList.add("show");
                        }, revealDelay)
                    }
                }
                
            })


            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
            requestAnimationFrame(scroll)
        }
        scroll();

	/* option */
        .reveal > span,
        .reveal > div {
            opacity: 0;
        }
        .reveal.show > span,
        .reveal.show > div {
            animation: opacity 1s linear forwards;
        }
        .reveal {
            position: relative;
        }
        .reveal::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: #fff;
            z-index: 1;
        }
        .reveal.reveal-two::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 100%;
            z-index: 1;
            background: gray;
        }

        /* 기본값 */
        .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;
        }
        /* 두가지효과 */
        .reveal.show::after {
            animation: reveal 1000ms 300ms;
        }
        .reveal.reveal-RTL.show::after {
            animation: reveal-RTL 1000ms 300ms;
        }
        .reveal.reveal-TTB.show::after {
            animation: reveal-TTB 1000ms 300ms;
        }
        .reveal.reveal-BTT.show::after {
            animation: reveal-BTT 1000ms 300ms;
        }


        @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;}
            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; top: auto; bottom: 0;}
            50% {width: 100%; height: 100%; top: auto; bottom: 0;}
            80% {width: 100%; height: 100%; top: auto; bottom: 0;}
            100% {width: 100%; height: 0; top: auto; bottom: 100%;}
        }