패스트캠퍼스 챌린지 16일차 - Part 1. 스타벅스 예제(4)

13. 순차적 애니메이션 - 전역 버튼 스타일 (1)

이미지에 글자가 들어있다면 대체 텍스트에 그 글자를 써놓는 것이 좋음

14. 순차적 애니메이션 - 전역 버튼 스타일 (2)

/* 기본형 */
.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{ /* class 선택자가 2개이기 때문에 우선순위 가짐*/
  background-color: #333;
  color:#fff;
}
.btn.btn--reverse:hover{
  background-color: transparent;
  color:#333;
}
/* 브라운형 */
.btn.btn--brown{
  color:#592B18;
  border-color:#592B18;
}
.btn.btn--brown:hover{
  color:#FFF;
  background-color:#592B18;
}

CSS에 맞게 HTML 클래스명만 바꾸면 스타일을 바꿀 수 있음 → 부트스트랩에서도 이용

.visual .title{
  position: absolute;
  top: 88px;
  left: -10px;
}
.visual .title .btn{
    position: absolute;
    top: 259px;
    left: 173px;
}
/* btn을 title에 묶어놨기 때문에 이동했을 때 같이 따라다님 */

Visual Section

15. 순차적 애니메이션 - 순차적으로 요소 보이기

<!-- 애니메이션 요소가 들어가는 부분마다 묶어서 fade-in 클래스 추가 -->
<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 CALAMEL LATTE" 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 image">
</div>

/* 안 보이게 만들어놓음 */
.visual .fade-in{
  opacity: 0;
}

const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function(fadeEl, index){
  // gsap.to(요소, 지속시간, 옵션);
  gsap.to(fadeEl, 1, {
    delay:(index + 1) * .7, //순차적 애니메이션 0.7, 1.4, 2.1
    opacity: 1
  });
});

애니메이션을 통해 이미지가 순차적으로 나타난다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.