Parallax Effect 스크롤링 효과 - 나타나기

 

	// window.addEventListener("scroll", () => {
        //     let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
        //     document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
        // })


        
        function scroll(){
            //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

            document.querySelectorAll(".content__item").forEach(el => {
                if( scrollTop > el.offsetTop - window.innerHeight/2){
                    el.classList.add("show");
                }
            })
            requestAnimationFrame(scroll)
        }
        scroll();

        #contents > section .parallax__cont__num {
            opacity: 0;
            transform: translateY(200px);
            transition: all 1s 0.1s cubic-bezier(0, 0.38, 0.21, 0.99);
        }
        #contents > section .parallax__cont__title {
            opacity: 0;
            transform: translateX(-100px);
            transition: all 1s 0.3s cubic-bezier(0, 0.38, 0.21, 0.99);
        }
        #contents > section .parallax__cont__imgWrap {
            opacity: 0;
            transform: translateY(200px) rotate(30deg) skew(20deg);
            transition: all 1s 0.6s cubic-bezier(0, 0.38, 0.21, 0.99);
        }
        #contents > section .parallax__cont__desc {
            opacity: 0;
            transform: translateX(-200px);
            transition: all 1s 0.9s cubic-bezier(0, 0.38, 0.21, 0.99);
        }

        #contents > section.show .parallax__cont__num {
            opacity: 0.07;
            transform: translateY(0);
        }
        #contents > section.show .parallax__cont__title {
            opacity: 1;
            transform: translateX(0);
        }
        #contents > section.show .parallax__cont__imgWrap {
            opacity: 1;   
            transform: translateY(0) rotate(0) skew(0); 
        }
        #contents > section.show .parallax__cont__desc {
            opacity: 1;
            transform: translateX(0);
        }

        #contents > section:nth-child(even) .parallax__cont__title {
            transform: translateX(100px);
        }
        #contents > section:nth-child(even) .parallax__cont__imgWrap {
            transform: translateY(-200px) rotate(-30deg) skew(-20deg);
        }
        #contents > section:nth-child(even) .parallax__cont__desc {
            transform: translateX(200px);
        }

        #contents > section:nth-child(even).show .parallax__cont__title {
            transform: translateX(0);
        }
        #contents > section:nth-child(even).show .parallax__cont__imgWrap {
            transform: translateY(-0) rotate(0) skew(0);
        }
        #contents > section:nth-child(even).show .parallax__cont__desc {
            transform: translateX(0);
        }

 

자바스크립트로 패럴럭스 스크롤링(Parallax Scroll Effect)을 주는 사이트 입니다.

스크롤을 내렸을때, 스크롤 값과 이미지의 offsetTOP을 비교하여 해당 스크롤에 도달했을때 컨텐츠가 나타나도록 

스크립트를 만들었습니다.

 

스크롤 값과 offsetTop을 비교하여 해당 스크롤에 도착하는 지점이 화면에 보여지는게 이쁘지가 않아

window.innerHeight / 2 를 빼줘 해당 스크롤의 기준점을 이쁘게 지정해주었습니다.

 

참조사이트

패럴랙스 효과