Parallax 01

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

$(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<=9; 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($("#section"+(num+1)).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");
        }
    });
});

window.addEventListener("scroll", function(){
    let pageYOffset = window.pageYOffset;

    // 출력용
    document.querySelector(".pageYOffset").innerText = 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;

    // 출력용 글씨 색
    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";
    }
});

Parallax 02

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

$(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);
});

window.addEventListener("scroll", function(){
    let pageYOffset = window.pageYOffset + screen.height/2;

    // 출력용
    document.querySelector(".pageYOffset").innerText = 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;

    // 출력용 글씨 색
    // 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)
    for(let i=1; i>=9; i++){
        document.querySelector(".s"+i+"OffsetTop").innerText = document.getElementById("section"+i).offsetTop;

        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");
        }
    });
});

Parallax 03

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

let scrollTop = $(window).scrollTop();

function scroll(){
    const newScrollTop = $(window).scrollTop(); // 위와 오차 발생
    const different = newScrollTop - scrollTop;

    gsap.to(".content-item-imgWrap", {duration: .3, skewY: different * 0.2, ease: Power1.ease});
    // $(".content-item-imgWrap").css({"transform":"rotate("+ different +"deg)"})
    gsap.to(".content-item-num", {duration: .6, x: different * 3, ease: Power1.ease});
    gsap.to(".content-item-desc", {duration: .6, skewX: different * 0.2, ease: Power4.ease});
    scrollTop = newScrollTop; // 초기화 시킨다. 스크롤 탑값이 늘어나면 효과가 너무 크게 생길 수 있음.
    requestAnimationFrame(scroll);
}

scroll();

let pageYOffset = window.pageYOffset;

const scroll = () => {
    const newPageYOffset = window.pageYOffset;
    const different = newPageYOffset - pageYOffset;

    console.log("pageYOffset :" + pageYOffset);
    console.log("newPageYOffset :" + newPageYOffset);
    console.log("different :" + different);

    let target = document.querySelectorAll(".content-item-img");

    // target.style.transform = "rotate("+different+"deg)";
    // forEach
    // target.forEach(box => {
    //     box.style.transform = "rotate("+different+"deg)";
    // })

    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: .6, skewX: different * 0.2, ease: Power4.ease});

    pageYOffset = newPageYOffset;
    requestAnimationFrame(scroll);
}

scroll();

Parallax 04

글자를 쪼개어 scrollTop과 OffsetTop을 활용한 패랠랙스 스크롤링 효과를 완성하였습니다.

// let text = $("#section1 .content-item-desc").text();
// let split = text.split("").join("");
//     split = "" + split + "";

// 글씨 쪼개기
$(".content-item-desc").each(function(){
    let text = $(this).text();
    let split = text.split("").join("
// let text = document.querySelector("#section1 .content-item-desc");
// let splitText = text.innerText;
// let splitWrap = splitText.split("").join("</span><span aria-hidden:'true'>");
//     splitWrap = "<span aria-hidden:'true'>" + splitWrap + ""

// text.innerHTML = splitWrap;
// text.setAttribute("aria-label", splitText);

// 글씨 쪼개기(한번에, forEach)
document.querySelectorAll(".content-item-desc").forEach(elem => {
    let splitText = elem.innerText;
    let splitWrap = splitText.split("").join("</span><span aria-hidden:'true'>");
        splitWrap = "<span aria-hidden:'true'>" + splitWrap + "</span>";
    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));
        });
    }
});

Parallax 05

스크롤 버튼을 클릭하면 해당 섹션으로 넘어가는 효과를 완성했습니다.

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

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

Parallax 06

스크로링 리빌효과를 완성했습니다.

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

    // if(scrollTop > $("#section2").offset().top){
    //     $("#section2").addClass("show");
    // }

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

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)