16-2 스타벅스 클론 코딩하기 - Part2 애니메이션 효과와 슬라이드

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

 

클론 코딩 완성형태

강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다.

---

순서

1. 순차적 애니메이션

2. notice 섹션

3. 이미지 슬라이드

 

 

● 순차적 애니메이션

각각의 이미지들을 순차적으로 띄우는 것은 gsap 의 JS 라이브러리를 사용해야합니다. 시간에 따라 출력되는 이미지들을 각각 fade-in이라는 클래스를 가진 div 태그로 묶은 후 CSS에서 fade-in 클래스들을 opacity:0 으로 처리해 주어야 합니다. 그 후에 JS로 작업해주면 됩니다.

 

const fadeEls = document.querySelectorAll('.visual .fade-in');         // visual 클래스의 모든 fade-in 클래스 검색
fadeEls.forEach(function (fadeEl, index) {             // 모든 요소에 대해 하나씩 함수 적용, 인덱스는 0부터 시작
  gsap.to(fadeEl, 1, {                                                            // gsap.to(요소, 지속시간, 옵션);
    delay: (index + 1) * .7,                                                      //0.7, 1.4, 2.1, 2.8 간격으로 함수 실행
    opacity: 1                                                                      // 0 이었던 투명도를 1로 변경
  });
});

 

 

● notice 섹션

 

▷ notice 영역 설정

위와 같은 공지사항을 만들기 위해서는 HTML 상의 여러 클래스를 두어 만들어야 합니다.

 

  <section class="notice">
    <div class="notice-line">
      <div class="bg-left"></div>
      <div class="bg-right"></div>
      <div class="inner">
        <div class="inner__left"></div>
        <div class="inner__right"></div>
      </div>
    </div>
  </section>

완성된 공지사항과는 검은색 흰색의 비율에 있어서 차이는 있지만

.notice-line 선택자에 position을 relative 값을 주고 bg-left와 bg-right의 width와 height는 각각 50% 100%씩, .inner 클래스의 높이를 62px로 지정해준다면 위와 같은 영역을 가질 수 있습니다.

다음으로 inner__left의 너비를 60%, inner__right의 너비를 40%로 정해주면 완성 형태와 같은 비율을 가질 수 있습니다. 그리고 글이 한 줄로 출력되게 하기위해 notice-line의 display의 값을 flex로 주어야합니다.

 

▷ 공지사항 틀 만들기

 

<div class="inner">
  <div class="inner__left">
    <h2>공지사항</h2>
    <div class="swiper-container"></div>
    <a href="javascript:void(0)" class="notice-line__more">
      <div class="material-icons">add_circle</div>
    </a>
  </div>
    <div class="inner__right">
      <h2>스타벅스 프로모션</h2>
      <div class="toggle-promotion">
        <div class="material-icons">upload</div>
      </div>
    </div>
</div>

위의 구조가 공지사항을 보여주는 HTML구조입니다. 중간의 swiper-container 클래스명은 자동으로 슬라이드 되도록 JS라이브러리를 사용하기위해 붙여주었습니다.

 

공지사항의 내용들이 높이의 중간에 출력되게 하기위해 .inner__left와 right의 부분에 align-items: center로 값을 주고

 

공지사항 이름은

  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-right: 20px;

공지사항의 내용은

  height: 62px;
  flex-grow: 1;    //공지사항과 아이콘 부분을 제외한 영역을 최대한 차지하기 위해 1로 설정

더보기 버튼은

/*상하좌우 가운데 정렬*/  
width: 62px;
height: 62px;
display: flex;
justify-content: center;
align-items: center;

값을 주어 맞춰 줍니다.

 

오른쪽 프로모션 부분은 위와 비슷하게 하고 우측정렬을 하기위해 justify-content: flex-end 값을 주어서 정렬시켜줍니다.

 

▷ 공지사항 슬라이드

공지사항의 내용들을 슬라이드할 수 있도록 만들기 위해서는 Swiper JS 라이브러리의 도움을 받아야합니다.

Swiper - The Most Modern Mobile Touch Slider

해당 사이트에서 Demos를 클릭해 들어가면 자신이 사용하고 싶은 슬라이드 방식을 찾아보실 수 있습니다.

SwiperJS를 사용하기 위한 HTML 링크와 스크립트 코드는 Get Started에 있으므로 copy 후 자신의 HTML에 붙여넣어 주세요. CSS파일과 JS 파일 모두 필요합니다!!

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

슬라이드를 사용하기 위해 적용해야하는 구조는 Get Started에서 'Add Swiper HTML Layout' 부분에 젹혀 있으므로 참고하면 됩니다.

 

더 많은 슬라이드 방법이 있겠지만 제가 필요한 슬라이드 방법은 수직으로 슬라이드 하는 방법이 필요합니다.

따라서 적용시키기 위해 JS에 관련 코드를 추가해줘야합니다.

// new Swiper(선택자, 옵션)
new Swiper('.notice-line .swiper-container', {
  direction: 'vertical',        //horizontal은 기본값이므로 생략 가능  
  autoplay: true,              //자동재생 여부  
  loop: true                    //마지막 슬라이드 재생 후 처음으로 이동
});

CSS 부분에서는 공지사항 내용을 가운데 정렬하기 위해 display는 flex로 align-items는 center로 하여 정렬시켜주면 완료입니다. 

 

● 이미지 슬라이드

 

▷ 요소 항상 가운데 위치시키기

 

사진에서 보이는 것처럼 CSS를 통해 화면을 늘이던지 줄이던지 TEST의 글자가 항상 가운데 위치시킬 수 있습니다. 바로 left값과 margin-left값을 통해 설정할 수 있습니다.

 

우선 위 그림의 CSS설정값을 보겠습니다.

.notice .promotion .swiper-container{
  width: calc(819px * 3 + 20px);
  height: 553px;
  background-color: orange;
  position: absolute;
  text-align: center;
  font-size: 200px;
  top: 40px;
  left: 50%; 
 margin-left: calc((819px * 3 + 20px) / -2);
}

부모요소의 position값을 relative로 설정하고 자식 요소를 absolute로 설정하면 그림의 TEST는 좌측 상단으로 붙게 됩니다, 그 후에 left: 50%값을 통해 오렌지 박스의 왼쪽 세로는 화면의 50%지점에 놓이게 됩니다. 하지만 margin-left 값을 통해 다시 왼쪽으로 당겨오게 되면서 항상 중앙에 위치할 수 있게 됩니다.

 

▷ 이미지 슬라이드

이미지의 슬라이드 역시 Swiper JS 라이브러리를 사용하여 동작합니다.

위 그림의 자동재생은 다음의 메소드를 통해 동작합니다.

 new Swiper('.promotion .swiper-container', {
  slidesPerView: 3,                     //한번에 보여줄 슬라이드 개수
  spaceBetween: 10,                  //슬라이드 사이 여백 (단위 px)
  centeredSlides: true,               //1번 슬라이드가 가운데 보이기
  loop: true,
  autoplay: {
    delay: 1000                         //1초마다 슬라이드 이동
  }
});

 

가운데 이미지를 제외한 나머지 이미지는 투명하게 하기위해서는 찾아봐야 할 것이 있습니다.

개발자도구를 통해 가운데 이미지를 검색해 보면 swiper-slide 옆에 swiper-slide-active라는 클래스가 추가된 것을 볼 수 있습니다.

 

CSS를 통해 이 클래스명을 가진 태그는 opacity는 1로 나머지는 0.5로 설정하여 투명도처리를 할 수 있습니다.

 

 

▷ 슬라이드 영역 토글하기

 

그림에 보이는 아이콘을 누르면 사라지는 토글기능을 만들어보겠습니다.

 

HTML에 클래스명을 지을 때 다음과 같이 이름을 지었습니다.

<div class="toggle-promotion">
  <div class="material-icons">upload</div>
</div>

 

이 작업을 처리하기 위해서는 JS와 CSS 모두 처리해야 합니다.

JS의 경우

const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
let isHidePromotion = false;  //보이는 상태
promotionToggleBtn.addEventListener('click', function() {
  isHidePromotion = !isHidePromotion
  if(isHidePromotion) {
   //숨김처리
   promotionEl.classList.add('hide');
  } else {
   //보임 처리
   promotionEl.classList.remove('hide');
  }
});

querySelector를 통해 슬라이드되는 이미지들이 담겨있는 promotion클래스를 찾아 promotionEl에 저장하고, 아이콘 이미지가 들어있는 toggle-promotion의 클래스를 찾아 promotionToggleBtn 변수에 저장합니다. 그 후 클릭할 때마다 Boolean값이 변경되도록 부정연산자를 넣어 변수값이 변경되도록 해주고 조건문에 의해 클래스명 'hide'가 추가되고 제거 될 수 있도록 해줍니다.

 

CSS로 넘어와

.notice .promotion{
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height .4s;
  overflow: hidden;
}
.notice .promotion.hide {
  height: 0px;
}

  .promotion.hide 클래스 선택자에 높이를 0을 부여하고 .promotion 클래스선택자에 overflow는 hidden을 넣어 섹션이 사라지도록 하는 토글기능을 만들 수 있습니다.

정리

애니메이션 요소를 사용하기위해 정말 많은 JS라이브러리와 CSS를 사용했습니다. 오픈소스이다 보니 사용법에 관한 정보가 없어 많이 찾아보고 응용해봐야 할 것 같습니다.

 

1. 개발자도구를 통해 타 사이트의 동작법 및 변화들을 연구하며 이해하기

2. 연습을 실전처럼 코딩 후 어떻게 동작되는지 이해하기