(스타벅스)Section 1_ 순차적으로 요소보이기 // btn 속성

포인트

HTML

**순차적으로 보여주고 싶은 요소에 같은 클라스이름 설정

 

 

CSS

** btn--abc를 사용해서 btn이 들어가는 요소 스타일 바꿔주기

     참고 2022.06.04 - [CSS] - Button_ 여러 버튼 속성지정

** 요소를 순차적으로 나타내기위해 opacity:0을 이용하여 처음로딩되면 화면에 요소가 나타나지 않게 설정

 

JS

** document.querySelectorAll('')을 사용하여 나타날요소들 모두 찾기

**forEach(function(요소,indec){}) 를 사용하여 요소의 수만큼 반복해서 함수 실행

**gsap.to(요소,지속시간,옵션)을 사용하여 애니메이션추가

** delay 속성을 사용하여 순서대로 요소들이 나타나게함.

 

결과

페이지가 로딩되면 이미지가 순차적으로 나타남

 

HTML

 <!-- VISUAL SECTION -->

  <section class="visual">

    <div class="inner">
      <div class="title fade-in">
        <img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL 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 MOCHA" 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;
}  
// 처음 페이지가 나타났을때 요소가 보이지 않아야 함

 

JS

// 나타날 요소들(.fade-in) 찾기.
const fadeinEls = document.querySelectorAll('.visual .fade-in')
// 나타날 요소들을 하나씩 반복해서 처리!
 //반복되는 횟수를 인덱스라는이름으로 받아서 사용
fadeinEls.forEach(function (fadein,index) {
  // 각 요소들을 순서대로(delay) 보여지게 함!
 // gsap 라는 라이브러리의 .to속성으로 fadein을 1초동안 투명도를 1로 만들고 0.7초 간격으로 나타나게함.
  gsap.to(fadein, 1, {
    delay: (index + 1) * .7, //index는 0부터 시작하기 때문에 1을 더해주지 않으면 0*0.7로 delay가 적용되지 않음
    opacity: 1
  })
})