이미지 순차적으로 나타나기, 기본 버튼 css에서 스타일주기

1. visual section 배경 넣고 이미지 배치하기

- height 646px

 

2. 시간차로 이미지 나타내기

- 클래스 fade-in 추가하여 투명도가 0인 상태에서 시작

 

3. 5가지 버튼 만들기 (#333,reverse,#592B18,#D9AA8A,#fff)

- width 139px / padding 10px

 

 

---

 

 

1. visual section 배경 넣고 이미지 배치하기

<!-- VISUAL SECTION -->
 <section class="visual">
  <div class="inner">

    <div class="title">
      <img src="./images/visual_title.png" alt="Delightful" />
      <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
    </div>
    <img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
    <img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
    <img src="./images/visual_cup2.png" alt="new CARAMEL CRUMBLE MOCHA" class="cup2 image" />
    <img src="./images/visual_cup2_text.png" alt="카라멜 크럼블 모카" class="cup2 text" />
    <img src="./images/visual_spoon.png" alt="spoon" class="spoon" />

  </div>
 </section>

.visual {  margin-top: 120px;  background-image: url("../images/visual_bg.jpg");  background-position: center;}
.visual .inner {  height: 646px;}
.visual .title {  position: absolute;  top: 88px;  left: -10px;}
.visual .title .btn {  position: absolute;  top: 259px;  left: 173px;}
.visual .cup1.image {  position: absolute;  bottom: 0;  right: -47px;}
.visual .cup1.text {  position: absolute;  top: 38px;  right: 171px;}
.visual .cup2.image {  position: absolute;  bottom: 0px;  right: 162px;}
.visual .cup2.text {  position: absolute;  top: 321px;  right: 416px;}
.visual .spoon {  position: absolute;  bottom: 0px;  left: 275px;}

 

 

2. 시간차로 이미지 나타내기

(힌트)

- CSS에서 .fade-in에는 모두 투명도0

- JS에서 forEach라는 DOM API와 gsap 라이브러리를 이용

- forEach함수의 매개변수로는 fadeEl, index 이용

- gsap의 속성은 delay와 opacity 이용

📌반복처리하는 함수 forEach

📌index는 0부터 시작하는 제로베이스 -> index + 1

📌.7초마다 나타나게 하기 위해서는 기초값에 .7을 곱한다.

const fadeEls = document.querySelectorAll('.visual .fade-in');

fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, { //fadeEl은 1초 동안 {}하게 한다.
    delay: (index + 1) * .7, //fadeEl은 각각 .7초 차이로 나타난다.
    opacity: 1
  });
});

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

<div class="title fade-in">
  <img src="./images/visual_title.png" alt="Delightful" />
  <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 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>

 

 

3. 5가지 버튼 만들기

📌 -- dash기호를 사용한 클래스명 부여

.btn {
  width: 130px;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
  font-size: 16px; /* 부모로부터 글씨의 영향을 받을 수 있으므로 지정 */
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  display: block; /* a, span태그에 버튼을 부여했을 때도 정상적으로 작동하도록 */
  transition: .4s;
}
.btn:hover {  background-color: #333;  color: #fff;}

.btn.btn--reverse {  background-color: #333;  color: #fff;}
.btn.btn--reverse:hover {  background-color: transparent;  color: #333;}

.btn.btn--brown {  border-color: #592B18;  color: #592B18;}
.btn.btn--brown:hover {  background-color: #592B18;  color: #fff;}

.btn.btn--gold {  border-color: #D9AA8A;  color: #D9AA8A;}
.btn.btn--gold:hover {  background-color: #D9AA8A;  color: #fff;}

.btn.btn--white {  border-color: #fff;  color: #fff;}
.btn.btn--white:hover {  background-color: #fff;  color: #333;}