[html css js] 이미지 순차적으로 나타내는 효과

이미지를 순차적으로 나타내는 효과를 만들기 위해 gsap 라이브러리를 사용한다.

html 코드

    <section class="visual">
      <div class="inner">
        <div class="title fade-in">
          <img
            src="./images/visual_title.png"
            alt="STARBUCKS DELIGHFUL START TO THE YEARS"
          />
          <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
        </div>
        <div class="fade-in">
          <img
            src="./images/visual_cup1.png"
            alt="new OATMEAL LATTE"
            class="cup1 image"
          />
          <img
            src="./images/visual_cup1_text.png"
            alt="오트밀 라떼"
            class="cup1 text"
          />
        </div>
        <div class="fade-in">
          <img
            src="./images/visual_cup2.png"
            alt="new STARBUCKS CARAMEL CRUMBLE MOCA"
            class="cup2 image"
          />
          <img
            src="./images/visual_cup2_text.png"
            alt="캬라멜 크럼블 모카"
            class="cup2 text"
          />
        </div>
        <div class="fade-in">
          <img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
        </div>
      </div>
    </section>

css 코드 (요소 배치 코드는 생략)

.visual .fade-in {
  opacity: 0;
}

- 기본으로 투명도를 0으로 설정

 

Javascript 코드

const fadeEls = document.querySelectorAll(".visual .fade-in");
fadeEls.forEach(function (fadeEl, index) {
  //gsap.to(요소, 지속시간, 옵션);
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * 0.7,
    opacity: 1,
  });
});

.visual 클래스의 .fade-in으로 설정된 요소들을 가져온 후

각각에 요소에 다른 시간지연 효과를 주는 코드

gsap 라이브러리를 활용