스타벅스 클론코딩-3 (전역 배지 및 VISUAL)

 

HEADER - 전역 배지

 

클론코딩 예제 배지 특징

- 화면에서 스크롤을 일정 부분 내리면 천천히 사라짐, 올리면 다시 천천히 보여짐

 

  <!-- js 라이브러리(lodash) 연결 - 모듈화 성능 및 기타 기능을 제공하는 자바스크립트 유틸리티 라이브러리 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
  <!-- js 라이브러리(gsap) 연결 - 애니메이션 라이브러리 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous"></script>


  
<!-- 전역 배지 -->
<div class="badges">
	<div class="badge">
		<img src="./images/badge1.jpg" alt="Badge" />
	</div>
    <div class="badge">
    	<img src="./images/badge2.jpg" alt="Badge" />
    </div>
</div>

 

/* CSS */
header {
  width: 100%;
  position: fixed;
  top: 0;
}
header .badges {
  position: absolute;
  top: 132px;
  right: 12px;
}
header .badges .badge{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  /* 그림자 추가 */
  box-shadow: 4px 4px 10px rgba(0,0,0,.15);
  cursor: pointer;
}

 

// 자바 스크립트
// 배지 요소 변수에 저장
const badgeEl = document.querySelector('header .badges');

// 화면에서 스크롤 이동하면 동작 (화면에 스크롤Y 값이 500 이상이면 배지 숨김, 이하면 다시 보여짐)
// _.throttle(함수, 시간(ms)) - 여러번 발생하는 이벤트를 정해진 시간 동안 한번만 실행
window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // 배지 숨기기
    // badgeEl.style.display = 'none'; js에서 style 속성을 통해 css 제어할 수도 있다
    
    // gsap.to(요소, 지속시간(s), 옵션);
    // gsap - JS 애니메이션 라이브러리
    gsap.to(badgeEl, .6, {
      opacity: 0, // 투명도
      display: 'none'
    });

  } else {
    // 배지 보이기
    // badgeEl.style.display = 'block';

    gsap.to(badgeEl, .6, {
      opacity: 1, // 투명도
      display: 'block'
    });
  }
}, 300));

 

MAIN CONTENT - VISUAL

 

클론코딩 예제 VISUAL 특징

- 각각의 이미지 부분이 순차적으로 나타나는 특징을 가짐

 

<!-- VISUAL -->
<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>

 

/* btn(버튼) 디자인 추가 */
.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;
  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 {
  color: #582B18;
  border-color: #592B18;
}
.btn.btn--brown:hover {
  color: #FFF;
  background-color: #592B18;
}

/* VISUAL CSS */
.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;
  right: 173px;
}
.visual .cup1.image {
  position: absolute;
  bottom: 0;
  right: -47px;
}
.visual .cup1.text {
  position: absolute;
  top: 38;
  right: 171px;
}
.visual .cup2.image {
  position: absolute;
  bottom: 0;
  right: 162px;
}
.visual .cup2.text {
  position: absolute;
  top: 321px;
  right: 416px;
}
.visual .spoon {
  position: absolute;
  bottom: 0;
  left: 275px;
}
.visual .fade-in {
  opacity: 0;
}

btn 디자인 추가 - 해당 예제의 "자세히 보기" 버튼 디자인

.visual 부분 - 각 이미지의 배치를 지정

 

// 이미지를 순차적으로 나타내는 js 코드

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

// forEach(요소, 순서), 요소에는 위에 지정한 요소들이 하나씩 들어옴
fadeEls.forEach(function (fadeEl, index) {
  // gsap.to(요소, 지속시간(s), 옵션);
  gsap.to(fadeEl, 1, {
    // 0.7, 1.4, 2.1, 2.8초 요소의 순서대로 실행
    delay: (index + 1) * .7, 
    opacity: 1
  });
});