<script>
    //제이쿼리
    $(window).scroll(function () {
        let scrollTop = $(window).scrollTop() + $(window).height() / 2;
        let scrollTop2 = $(window).scrollTop()
        $(".scrollTop").text(scrollTop);

        $("#wrap h1").css({transform: "translateX(-"+scrollTop2+"px)"});
        $(".content-item").each(function (){
            let offset1 = (scrollTop - $(this).offset().top) * 0.1;
            let offset2 = (scrollTop - $(this).offset().top) * 0.2;
            let offset3 = (scrollTop - $(this).offset().top) * 0.3;
            let offset4 = (scrollTop - $(this).offset().top) * 0.4;

            $(this).find(".content-item-desc").css({ "transform": "translateY(" + -offset2 + "px)" });
            $(this).find(".content-item-num").css({ "transform": "translateY(" + offset2 + "px)" });
            $(this).find(".content-item-img").css({ "transform": "translateY(" + offset2 + "px)" });
        });
    });

    // //자바스크립트
    // window.addEventListener("scroll", () => {
    //     let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop) + screen.height / 2;

    //     document.querySelector(".scrollTop").textContent = pageYOffset;
    //     document.querySelectorAll(".content-item").forEach(elem => {
            
    //         let target = elem.childNodes[7];
            
    //         let offset = (pageYOffset - elem.offsetTop) * 0.2;

    //         console.log("페이지 YOffset : " + pageYOffset);
    //         console.log("offsettop : " + elem.offsetTop);
    //         console.log("offset" + (pageYOffset - elem.offsetTop)*0.2);
    //         target.style.transform = "translateY(" + -offset + "px)";
    //     });
    // });
</script>