parallax Effect01

패럴랙스 이펙트(제이쿼리/자바스크립트)

$(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;
    for(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 = "black";
    }
    if( pageYOffset > document.getElementById("section2").offsetTop ){
        document.querySelector(".s2OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s2OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section3").offsetTop ){
        document.querySelector(".s3OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s3OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section4").offsetTop ){
        document.querySelector(".s4OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s4OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section5").offsetTop ){
        document.querySelector(".s5OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s5OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section6").offsetTop ){
        document.querySelector(".s6OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s6OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section7").offsetTop ){
        document.querySelector(".s7OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s7OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section8").offsetTop ){
        document.querySelector(".s8OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s8OffsetTop").style.color = "black";
    }
    if( pageYOffset > document.getElementById("section9").offsetTop ){
        document.querySelector(".s9OffsetTop").style.color = "red";
    } else {
        document.querySelector(".s9OffsetTop").style.color = "black";
    }
});

parallax Effect02

패럴랙스 이펙트(제이쿼리/자바스크립트)

$(window).scroll(function(){
    let scrollTop = $(window).scrollTop();
    // each()
    $(".content-item").each(function(e,i){
        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",() => {
    let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop);

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

parallax Effect03

패럴랙스 이펙트(제이쿼리/자바스크립트)

// 움직임효과
$(document).mousemove(function(e){
    gsap.to(".cursor", {duration: 0.4, left: e.pageX - 10, top: e.pageY - 10, ease: power4.out})
});

// 오버효과
$(".contents em").hover(function(){
    $(".cursor").addClass("active");
}, function(){
    $(".cursor").removeClass("active");
});

// 출력용
$(".info.bottom li").click(function(){
    const text = $(this).text();
    // alert(text);
    $(".info.bottom li").removeClass("active");
    $(this).addClass("active");
    $(".cursor").css("mix-blend-mode", text);
});

// 제목에 마우스오버했을때
$(".info.left h1").hover(function(){
    $(".cursor").addClass("h1over");
}, function(){
    $(".cursor").removeClass("h1over");
});

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

gsap.to(".content-item-imgWrap", {duration: 0.6, rotate: different * 3, ease: Power4.ease});
gsap.to(".content-item-num", {duration: 0.6, x: different * 3, ease: Power1.ease});
gsap.to(".content-item-desc", {duration: 0.6, skewX: different * 3, ease: Power3.ease});

pageYOffset = newPageYOffset;
requestAnimationFrame(scroll);
}
scroll();

parallax Effect04

패럴랙스 이펙트(제이쿼리/자바스크립트)

// 글자 쪼개기
$(".content-item-desc").each(function(){
    let text = $(this).text();
    let split = text.split("").join("
document.querySelectorAll(".content-item-desc").forEach(elem => {
    let text = elem.innerText;
    let splitText = text.split("").join("</span><span aria-hidden='true'>");
    splitText = "<span aria-hidden='true'>" + splitText + "</span>";

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

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 Effect05

패럴랙스 이펙트(제이쿼리/자바스크립트)

$("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 Effect06

패럴랙스 이펙트(제이쿼리/자바스크립트)

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

window.addEventListener("scroll", () => {
    let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop);
    let wHeight = window.innerHeight;
    document.querySelectorAll(".reveal").forEach((elem) => {
        if (pageYOffset + wHeight / 2 > elem.parentElement.offsetTop) {
            elem.classList.add("show");
        }
        console.log(elem)
    });
});