parallaxEffect Reference v1.0 </doc>

parallaxEffect01

scrollTop과 offsetTop을 이용하여 패랠랙스 스크로링 효과를 완성하였습니다.

jQuery

// $(window).scroll(function(){
    //     const scrollTop = $(window).scrollTop() +$(window).height()/2 ;

    //     //출력용
    //     $(".scrollTop").text(parseInt(scrollTop));
    //     $(".s1OffsetTop").text( parseInt($("#section1").offset().top));
    //     $(".s2OffsetTop").text( parseInt($("#section2").offset().top));
    //     $(".s3OffsetTop").text( parseInt($("#section3").offset().top));
    //     $(".s4OffsetTop").text( parseInt($("#section4").offset().top));
    //     $(".s5OffsetTop").text( parseInt($("#section5").offset().top));
    //     $(".s6OffsetTop").text( parseInt($("#section6").offset().top));
    //     $(".s7OffsetTop").text( parseInt($("#section7").offset().top));
    //     $(".s8OffsetTop").text( parseInt($("#section8").offset().top));
    //     $(".s9OffsetTop").text( parseInt($("#section9").offset().top));

    //     //출력용 글씨 색

    //     if(scrollTop > $("#section1").offset().top) {
    //         $(".s1OffsetTop").css("color","red");
    //     } else {
    //         $(".s1OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section2").offset().top) {
    //         $(".s2OffsetTop").css("color","red");
    //     } else {
    //         $(".s2OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section3").offset().top) {
    //         $(".s3OffsetTop").css("color","red");
    //     } else {
    //         $(".s3OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section4").offset().top) {
    //         $(".s4OffsetTop").css("color","red");
    //     } else {
    //         $(".s4OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section5").offset().top) {
    //         $(".s5OffsetTop").css("color","red");
    //     } else {
    //         $(".s5OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section6").offset().top) {
    //         $(".s6OffsetTop").css("color","red");
    //     } else {
    //         $(".s6OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section7").offset().top) {
    //         $(".s7OffsetTop").css("color","red");
    //     } else {
    //         $(".s7OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section8").offset().top) {
    //         $(".s8OffsetTop").css("color","red");
    //     } else {
    //         $(".s8OffsetTop").css("color","white");
    //     }
    //     if(scrollTop > $("#section9").offset().top) {
    //         $(".s9OffsetTop").css("color","red");
    //     } else {
    //         $(".s9OffsetTop").css("color","white");
    //     }

    //     //나타나기
    //     if(scrollTop > $("#section1").offset().top){
    //         $("#section1").addClass("show");
    //     } else {
    //         $("#section1").removeClass("show");
    //     }
    //     if(scrollTop > $("#section2").offset().top){
    //         $("#section2").addClass("show");
    //     } else {
    //         $("#section2").removeClass("show");
    //     }
    //     if(scrollTop > $("#section3").offset().top){
    //         $("#section3").addClass("show");
    //     } else {
    //         $("#section3").removeClass("show");
    //     }
    //     if(scrollTop > $("#section4").offset().top){
    //         $("#section4").addClass("show");
    //     } else {
    //         $("#section4").removeClass("show");
    //     }
    //     if(scrollTop > $("#section5").offset().top){
    //         $("#section5").addClass("show");
    //     } else {
    //         $("#section5").removeClass("show");
    //     }
    //     if(scrollTop > $("#section6").offset().top){
    //         $("#section6").addClass("show");
    //     } else {
    //         $("#section6").removeClass("show");
    //     }
    //     if(scrollTop > $("#section7").offset().top){
    //         $("#section7").addClass("show");
    //     } else {
    //         $("#section7").removeClass("show");
    //     }
    //     if(scrollTop > $("#section8").offset().top){
    //         $("#section8").addClass("show");
    //     } else {
    //         $("#section8").removeClass("show");
    //     }
    //     if(scrollTop > $("#section9").offset().top){
    //         $("#section9").addClass("show");
    //     } else {
    //         $("#section9").removeClass("show");
    //     }

    // });

    //for문
    // $(window).scroll(function(){
    //     const scrollTop = $(window).scrollTop() +$(window).height()/2 ;
    //     $(".scrollTop").text(parseInt(scrollTop));
        
    //     for(let i=1; i<10; i++){
    //         //출력용
    //         $(".s"+i+"OffsetTop").text( parseInt($("#section"+i).offset().top));
    //         if(scrollTop > $("#section"+i).offset().top) {
    //             $(".s"+i+"OffsetTop").css("color","red");
    //             $("#section"+i).addClass("show");
    //         } else {
    //             $(".s"+i+"OffsetTop").css("color","white");
    //             $("#section"+i).removeClass("show");
    //         }
    //     }
    // });
       
    //each()
    $(window).scroll(function(){
        const scrollTop = $(window).scrollTop()+$(window).height()/2 ;
        $(".scrollTop").text(parseInt(scrollTop));

        $(".content-item").each(function(num){
            $(".s"+(num+1)+"OffsetTop").text( parseInt($(this).offset().top));
            if(scrollTop > $(this).offset().top) {
                $(".s"+(num+1)+"OffsetTop").css("color","red");
                $(this).addClass("show");
            } else {
                $(".s"+(num+1)+"OffsetTop").css("color","white");
                $(this).removeClass("show");
            }
        });
    });  

Javascript

// $(window).scroll(function(){
//     const scrollTop = $(window).scrollTop()
// });
window.addEventListener("scroll",function(){
    let pageYOffset = window.pageYOffset + screen.height/2;
    //출력용
    document.querySelector(".pageYOffset").innerText = parseInt(pageYOffset);
    // document.querySelector(".s1OffsetTop").innerText = document.getElementById("section1").offsetTop;
    // document.querySelector(".s2OffsetTop").innerText = document.getElementById("section2").offsetTop;
    // document.querySelector(".s3OffsetTop").innerText = document.getElementById("section3").offsetTop;
    // document.querySelector(".s4OffsetTop").innerText = document.getElementById("section4").offsetTop;
    // document.querySelector(".s5OffsetTop").innerText = document.getElementById("section5").offsetTop;
    // document.querySelector(".s6OffsetTop").innerText = document.getElementById("section6").offsetTop;
    // document.querySelector(".s7OffsetTop").innerText = document.getElementById("section7").offsetTop;
    // document.querySelector(".s8OffsetTop").innerText = document.getElementById("section8").offsetTop;
    // document.querySelector(".s9OffsetTop").innerText = document.getElementById("section9").offsetTop;
    for(let i=1; i<=9; i++){
        document.querySelector(".s"+i+"OffsetTop").innerText = document.getElementById("section"+i).offsetTop;
    }
    //출력용 글씨 색
    // if( pageYOffset > document.getElementById("section1").offsetTop ){
    //     document.querySelector(".s1OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s1OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section2").offsetTop ){
    //     document.querySelector(".s2OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s2OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section3").offsetTop ){
    //     document.querySelector(".s3OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s3OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section4").offsetTop ){
    //     document.querySelector(".s4OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s4OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section5").offsetTop ){
    //     document.querySelector(".s5OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s5OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section6").offsetTop ){
    //     document.querySelector(".s6OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s6OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section7").offsetTop ){
    //     document.querySelector(".s7OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s7OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section8").offsetTop ){
    //     document.querySelector(".s8OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s8OffsetTop").style.color = "white";
    // }
    // if( pageYOffset > document.getElementById("section9").offsetTop ){
    //     document.querySelector(".s9OffsetTop").style.color = "red";
    // } else {
    //     document.querySelector(".s9OffsetTop").style.color = "white";
    // }
    //글씨색 출력용
    for(let i=1; i<=9; i++){
        if( pageYOffset > document.getElementById("section"+i).offsetTop ){
            document.querySelector(".s"+i+"OffsetTop").style.color = "red";
        } else {
            document.querySelector(".s"+i+"OffsetTop").style.color = "white";
        }
    }
    //나타나기
    // if( pageYOffset > document.getElementById("section1").offsetTop){
    //     document.getElementById("section1").classList.add("show");
    // } else {
    //     document.getElementById("section1").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section2").offsetTop){
    //     document.getElementById("section2").classList.add("show");
    // } else {
    //     document.getElementById("section2").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section3").offsetTop){
    //     document.getElementById("section3").classList.add("show");
    // } else {
    //     document.getElementById("section3").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section4").offsetTop){
    //     document.getElementById("section4").classList.add("show");
    // } else {
    //     document.getElementById("section4").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section5").offsetTop){
    //     document.getElementById("section5").classList.add("show");
    // } else {
    //     document.getElementById("section5").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section6").offsetTop){
    //     document.getElementById("section6").classList.add("show");
    // } else {
    //     document.getElementById("section6").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section7").offsetTop){
    //     document.getElementById("section7").classList.add("show");
    // } else {
    //     document.getElementById("section7").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section8").offsetTop){
    //     document.getElementById("section8").classList.add("show");
    // } else {
    //     document.getElementById("section8").classList.remove("show");
    // }
    // if( pageYOffset > document.getElementById("section9").offsetTop){
    //     document.getElementById("section9").classList.add("show");
    // } else {
    //     document.getElementById("section9").classList.remove("show");
    // }
    //한번에 나타나기
    document.querySelectorAll(".content-item").forEach(elem => {
        if(pageYOffset > elem.offsetTop){
            elem.classList.add("show");
        } else {
            elem.classList.remove("show");
        }
    });
});

parallaxEffect02

scrollTop을 이용하여 이질감 효과를 완성하였습니다.

Javascript

window.addEventListener("scroll",()=>{
    let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop);
    // let offset1 = (pageYOffset - document.getElementById("section1").offsetTop) * 0.2;
    // let offset2 = (pageYOffset - document.getElementById("section2").offsetTop) * 0.2;
    // let offset3 = (pageYOffset - document.getElementById("section3").offsetTop) * 0.2;
    // let offset4 = (pageYOffset - document.getElementById("section4").offsetTop) * 0.2;
    // let offset5 = (pageYOffset - document.getElementById("section5").offsetTop) * 0.2;
    // let offset6 = (pageYOffset - document.getElementById("section6").offsetTop) * 0.2;
    // let offset7 = (pageYOffset - document.getElementById("section7").offsetTop) * 0.2;
    // let offset8 = (pageYOffset - document.getElementById("section8").offsetTop) * 0.2;
    // let offset9 = (pageYOffset - document.getElementById("section9").offsetTop) * 0.2;

    // document.querySelector("#section1 .content-item-desc").style.transform = "translateY("+ -offset1 +"px)";
    // document.querySelector("#section2 .content-item-desc").style.transform = "translateY("+ -offset2 +"px)";
    // document.querySelector("#section3 .content-item-desc").style.transform = "translateY("+ -offset3 +"px)";
    // document.querySelector("#section4 .content-item-desc").style.transform = "translateY("+ -offset4 +"px)";
    // document.querySelector("#section5 .content-item-desc").style.transform = "translateY("+ -offset5 +"px)";
    // document.querySelector("#section6 .content-item-desc").style.transform = "translateY("+ -offset6 +"px)";
    // document.querySelector("#section7 .content-item-desc").style.transform = "translateY("+ -offset7 +"px)";
    // document.querySelector("#section8 .content-item-desc").style.transform = "translateY("+ -offset8 +"px)";
    // document.querySelector("#section9 .content-item-desc").style.transform = "translateY("+ -offset9 +"px)";

    // for(let i = 1; i<=9; i++){
    //     let offset = (pageYOffset - document.getElementById("section"+i).offsetTop) * 0.2;
    //     document.querySelector("#section"+i+" .content-item-desc").style.transform = "translateY("+ -offset +"px)";
    // }

    document.querySelectorAll(".content-item").forEach((elem)=>{
        // console.log(elem);
        let target = elem.childNodes[7];
        let offset = (pageYOffset - elem.offsetTop)*0.2;
        target.style.transform = "translateY("+ -offset +"px)";
    })

});

jQuery

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

    // let offset1 = (scrollTop - $("#section1").offset().top);
    // let offset2 = (scrollTop - $("#section2").offset().top);
    // let offset3 = (scrollTop - $("#section3").offset().top);
    // let offset4 = (scrollTop - $("#section4").offset().top);
    // let offset5 = (scrollTop - $("#section5").offset().top);
    // let offset6 = (scrollTop - $("#section6").offset().top);
    // let offset7 = (scrollTop - $("#section7").offset().top);
    // let offset8 = (scrollTop - $("#section8").offset().top);
    // let offset9 = (scrollTop - $("#section9").offset().top);

    // $("#section1 .content-item-desc").css({transform:"translateX("+offset1+"px)"});
    // $("#section2 .content-item-desc").css({transform:"translateX("+offset2+"px)"});
    // $("#section3 .content-item-desc").css({transform:"translateX("+offset3+"px)"});
    // $("#section4 .content-item-desc").css({transform:"translateX("+offset4+"px)"});
    // $("#section5 .content-item-desc").css({transform:"translateX("+offset5+"px)"});
    // $("#section6 .content-item-desc").css({transform:"translateX("+offset6+"px)"});
    // $("#section7 .content-item-desc").css({transform:"translateX("+offset7+"px)"});
    // $("#section8 .content-item-desc").css({transform:"translateX("+offset8+"px)"});
    // $("#section9 .content-item-desc").css({transform:"translateX("+offset9+"px)"});

    //for문
    // for(let i=1; i<=9; i++){
    //     let offset = (scrollTop - $("#section"+i).offset().top);
    //     $("#section"+i+" .content-item-desc").css({transform:"translateX("+offset+"px)"});
    // }

    //each문
    $(".content-item").each(function(){
        let offset1 = (scrollTop - $(this).offset().top)*0.1;
        let offset2 = (scrollTop - $(this).offset().top)*0.2;
        
        $(this).find(".content-item-desc").css({transform:"translateY("+ -offset2+"px)"});
        $(this).find(".content-item-num").css({transform:"translateY("+offset1+"px)"});
        $(this).find(".content-item-img").css({transform:"translateY("+offset2+"px)"});
    })
    //출력용
    $(".scrollTop").text(scrollTop);
});

parallaxEffect03

gsap애니메이션을 이용하여 효과를 완성했습니다.

Javascript

let pageYOffset = window.pageYOffset;
const scroll = () => {
    const newPageYOffset = window.pageYOffset;
    const different = newPageYOffset - pageYOffset;
    console.log("scrollTop :" + pageYOffset);
    console.log("newScrollTop :" + newPageYOffset);
    console.log("different :" + different);
    let target = document.querySelectorAll(".content-item-imgWrap");
    //target.style.transform = "rotate("+different+"deg)";
    //forEach
    // target.forEach((elem)=>{
    //     elem.style.transform = "rotate("+different+"deg)";
    // });
    gsap.to(".content-item-imgWrap", { skewY:different*0.1 , duration:.3 , ease: Power1.ease });
    gsap.to(".content-item-num", { skewY:different*0.1 , duration:.6 , ease: Power1.ease });
    gsap.to(".content-item-desc", { skewX:different*0.2 , duration:.6 , ease: Power4.ease });
    pageYOffset = newPageYOffset;
    requestAnimationFrame(scroll);
}
scroll();

jQuery

let scrollTop = $(window).scrollTop();
function scroll(){
        const newScrollTop = $(window).scrollTop();
        const different = newScrollTop-scrollTop;

        console.log("scrollTop :"+scrollTop);
        console.log("newScrollTop :"+newScrollTop);
        console.log("different :"+different);
        // gsap.to(".animation01",{x: leftWidth,rotation: 360, borderRadius:5, scale:2, duration:2});

        gsap.to(".content-item-imgWrap",{duration: .3, skewY: different * 0.2, ease: Power1.ease});
        gsap.to(".content-item-num",{duration: .6, x: different * 3, ease: Power1.ease});
        gsap.to(".content-item-desc",{duration: .1, y: different , ease: Power4.ease});

        scrollTop = newScrollTop;
    requestAnimationFrame(scroll);
}
scroll();

parallaxEffect04

split을 이용하여 한글자씩 효과를 주었습니다.

jQuery

$(".content-item-desc").each(function(){
    let text = $(this).text();
    let split = text.split("").join("");
    split = ""+split+"";
    $(this).html(split).attr("aria-label",text);
});

//나타나기
$(window).scroll(function(){
    //한번에 나오게 하기
    // $(".content-item").each(function(){
    //     if( $(window).scrollTop() > $(this).offset().top){
    //         $(this).find(".content-item-desc").addClass("show");
    //     } else {
    //         $(this).find(".content-item-desc").removeClass("show");
    //     }
    // });

    //한글자씩 나오게 하기
    // if( $(window).scrollTop()> $("#section1").offset().top){
    //     $("#section1 .content-item-desc span").each(function(i){
    //         setTimeout(()=>{
    //             $("#section1 .content-item-desc span").eq(i).addClass("show");
    //         },50 * (i+1));
    //     });
    // }
    // 한글자씩 한번에 나오게 하기
    $(".content-item").each(function(){
        if($(window).scrollTop() > $(this).offset().top){
            gsap.to($(this).find(".content-item-desc span"),{duration: .3, opacity:1, y:0, stagger:0.05, ease:Power1.ease});
        }
    });
});

Javascript

document.querySelectorAll(".content-item-desc").forEach(elem=>{
    let splitText = elem.innerText;
    let splitWrap = splitText.split("").join("");
        splitWrap = ""+splitWrap+""

    elem.innerHTML = splitWrap;
    elem.setAttribute("aria-label",splitText);
});

window.addEventListener("scroll", () => {
    let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop);
    if(pageYOffset > document.getElementById("section1").offsetTop){
        document.querySelectorAll("#section1 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section2").offsetTop){
        document.querySelectorAll("#section2 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section3").offsetTop){
        document.querySelectorAll("#section3 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section4").offsetTop){
        document.querySelectorAll("#section4 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section5").offsetTop){
        document.querySelectorAll("#section5 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section6").offsetTop){
        document.querySelectorAll("#section6 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section7").offsetTop){
        document.querySelectorAll("#section7 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section8").offsetTop){
        document.querySelectorAll("#section8 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
    if(pageYOffset > document.getElementById("section9").offsetTop){
        document.querySelectorAll("#section9 .content-item-desc span").forEach((elem,index)=>{
            setTimeout(()=>{
                elem.classList.add("show");
            },50 * (index + 1));
        });
    }
});

parallaxEffect05

패럴럭스 스크롤링효과를 주었습니다.

jQuery

$("a[href^='#']").click(function(e){
    e.preventDefault();
    let target = $($(this).attr("href"));
    $("html,body").animate({scrollTop : target.offset().top}, 800, "easeInOutQuint");
});

Javascript

document.querySelectorAll("a[href^='#']").forEach(elem => {
    elem.addEventListener("click", e => {
        e.preventDefault();
        document.querySelector(elem.getAttribute('href')).scrollIntoView({
            behavior : 'smooth'
        })
    });
});

parallaxEffect06

리빌효과를 주었습니다.

jQuery

$(window).scroll(function(){
    let scrollTop = $(window).scrollTop();
    
    $(".reveal").each(function(){
        if( scrollTop + $(window).height()/2 > $(this).offset().top ){
            $(this).addClass("show");
        }
    });
});

Javascript

function scrollReveal(){
    const reveal = document.querySelectorAll(".reveal");
    reveal.forEach(elem => {
        let scrollTop = document.documentElement.scrollTop + window.innerHeight/2;
        let offsetTop = elem.offsetTop + elem.parentElement.offsetTop;
        console.log(offsetTop);

        if(scrollTop > offsetTop){
            elem.classList.add("show");
        }
    })
}
window.addEventListener("scroll",scrollReveal)

figma

확인하기