패럴럭스 효과

 

리빌효과

 

스크립트

        document.querySelectorAll("p.reveal").forEach(text => {
            text.innerHTML = `<span>${text.innerHTML}</span>`
        })

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

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

            reveals.forEach(reveal => {
                let revealOffset = reveal.offsetTop + reveal.parentElement.offsetTop;
                let revealDelay = reveal.dataset.delay;
                
                // if (scrollTop >= revealOffset - window.innerHeight) {
                //     reveal.classList.add("show")
                // }

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

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

p에 reveal이 붙으면  text.innerHTMlL 앞과 뒤에 span을 넣어줍니다. 

        document.querySelectorAll("p.reveal").forEach(text => {
            text.innerHTML = `<span>${text.innerHTML}</span>`
        })

스크롤 함수를 생성합니다.

그 안에 스크롤 값을 구하는 변수를 넣습니다.

            let scrollTop = window.scrollY || window.pageYOffset;

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

변수 reveals를 만들어 줍니다 reveals는 다중 선택자이기 때문에 forEach를 사용해줍니다.

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

reveals.forEach(reveal => {
                let revealOffset = reveal.offsetTop + reveal.parentElement.offsetTop;
                let revealDelay = reveal.dataset.delay;

그 안에 변수 let revealOffset를 reveal.offsetTop + reveal.parentElement.offsetTop로 정의 해주고

et revealDelay를 reveal.dataset.delay로 정의 해줍니다. 

그리고 조건문을 걸어줍니다.

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

.reveal {
            position: relative;
        }

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

        .reveal.reveal-TWO::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            height: 100%;
            z-index: 1;
            background-color: #0aa0a0;
        }

        /* 1개 */
        .reveal.show::before {
            animation: reveal 1s ease;
        }

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

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

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

        /* 2개 */
        .reveal.show::after {
            animation: reveal 1s ease 0.3s;
        }

        .reveal.reveal-RTL.show::after {
            animation: reveal-RTL 1s ease 0.3s;
        }

        .reveal.reveal-TTB.show::after {
            animation: reveal-TTB 1s ease 0.3s;
        }

        .reveal.reveal-BTT.show::after {
            animation: reveal-BTT 1s ease 0.3s;
        }

    
        /* .parallax__item__desc.reveal.show::after {
            animation: reveal 1s ease 1.5s;
        }

        .parallax__item__desc.reveal.reveal-RTL.show::after {
            animation: reveal-RTL 1s ease 1.5s;
        }

        .parallax__item__desc.reveal.reveal-TTB.show::after {
            animation: reveal-TTB 1s ease 1.5s;
        }

        .parallax__item__desc.reveal.reveal-BTT.show::after {
            animation: reveal-BTT 1s ease 1.5s;
        } */

        @keyframes reveal-RTL {
            0% {
                width: 0;
                left: auto;
                right: 0%;
            }

            50% {
                width: 100%;
                left: auto;
                right: 0%;
            }

            80% {
                width: 100%;
                left: auto;
                right: 0%;
            }

            100% {
                width: 0;
                left: auto;
                right: 100%;
            }
        }

        @keyframes reveal {
            0% {
                width: 0;
                left: 0;
            }

            50% {
                width: 100%;
                left: 0;
            }

            80% {
                width: 100%;
                left: 0;
            }

            100% {
                width: 0;
                left: 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%;
            }
        }

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

        }

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

        /* animation */
        @keyframes opacity {
            0% {
                opacity: 0;
            }

            60% {
                opacity: 0;
            }

            70% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        .parallax__item__num,
        .parallax__item__title {
            display: none;
        }

.reveal에 각자의 클래스가 붙으면 바뀌는 애니메이션 css를  설정해줍니다.