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

    $(".scrollTop").text(scrollTop)

    $("#wrap h1").css({
        transform: "translateX(-" + scrollTop + "px)"
    })


    // for(let i=1; i>=9; i++){
    //     let offset = (scrollTop - $("#section"+i).offset().top)
    //     $("#section"+i+" .content-item-desc").css({transform : "translateX("+offset+"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(" + offset1 + "px)"});
        $(this).find(".content-item-num").css({transform: "translateY(" + offset4 + "px)"});
        $(this).find(".content-item-img").css({transform: "translateY(" + offset2 + "px)"});
    });



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