스크롤 했을 때 이미지 움직이기

• 스크롤을 할 때, 이미지가 밀리면서 움직이는 효과를 주고 싶을 때!
• 한 곳이 아닌 여러곳을 컨트롤 하고 싶을 때!

🧩 main.js

    $('[data-scroll]').each(function(index,item){
        start = ($(this).data('start')) ? "top" : "bottom";
        rotate = ($(this).data('rotate')) ? $(this).data('rotate') : 0;
        y = $(this).data('scroll');
        gsap.to(item,{
            scrollTrigger: {
                trigger:item,
                start: `top ${start}`,
                end: "bottom top",
                scrub: 1,
            },
            yPercent: y,
            rotation: rotate
        })
    })

data-scroll이라는 가상의 data를 가지고 각각(each)의 index(태그의 순서),item(해당 태그)를 이용하여 원하는 곳의 data-scroll값을 이용하여 y축의 움직임 또는 rotation을 이용한 회전을 주는 방법이다.
scrollTrigger의 start의 원하는 지점이 각 각 다를 수 있기 때문에,
start변수를 만들어 this의 data-start가 있다면 top을, 아니면 bottom을 주고
rotate변수도 마찬가지 data-rotate가 있다면, data-rotate값을, 아니면 0
scrollTrigger start에 변수를 준다 변수를 줄 때는 백틱(`)을 쓴다.
yPercent의 할당값을 변수 y를 주고 y는 data-scroll값이 들어가도록 한다.

🧩 html

	<img src="./images/mv.jpg" alt="코카콜라사진" data-scroll="-10" data-start="top">

움직임이 필요한 곳에 필요한 data-scroll 스크롤값과 스타트값의 변화가 필요하면 data-start를 준다(data-rotate마찬가지)