gsap-07배경색 효과(feat. scrollTrigger)

스크롤 내리때 배경색이 바뀌는 효과를 만들어보자

<section id="section7" class="parallax__item" data-bgcolor="#3f2459">
            <span class="parallax__item__num">07</span>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
        </section>

body { --bg-color : #222;
            background-color: var(--bg-color);
            color: #fff;
            font-family: "NexonLv1Gothic";
            font-weight: 300;
        }

01. 전체 배경변경하기

let bg = gsap.timeline({
  scrollTrigger:{
    start:0,
    end:'max',
    scrub:true,
  }
})
bg.to("body",{"--bg-color":"red"})
  .to("body",{"--bg-color":"green"})
  .to("body",{"--bg-color":"blue"})

02. data 값으로 변경하기

gsap.utils.toArray(".parallax__item").forEach(item => {
  let color = item.getAttribute("data-bgcolor");

  ScrollTrigger.create({
    trigger:item,
    start:"top 50%",
    bottom:"bottom 50%",
    markers:true,

    onEnter:()=>gsap.to("body",{
      backgroundColor:color,
      duration:1.4
    }),
    onEnterBack:()=>gsap.to("body",{
      backgroundColor:color,
      duration:1.4
    }),
  })
});