7. 스타벅스 유튜브 영상 배경

---

스타벅스 리워즈 HTML

  <section class="rewards">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="inner">

      <div class="btn-group">
        <div class="btn btn--reverse sign-up">회원가입</div>
        <div class="btn sign-in">로그인</div>
        <div class="btn gift">e-Gift 선물하기</div>
      </div>

    </div>
  </section>

• 기존 정렬 방식인 bg-left, bg-right, inner 사용
• 버튼 3가지 구성: 회원가입, 로그인, e-Gift 선물하기

---

스타벅스 리워즈--위치 CSS 

.rewards {
  position: relative;
}
.rewards .bg-left {
  width: 50%;
  height: 100%;
  background-color: #272727;
  position: absolute;
  top: 0;
  left: 0;
}
.rewards .bg-right {
  width: 50%;
  height: 100%;
  background-color: #d5c798;
  position: absolute;
  top: 0;
  right: 0;
}
.rewards .inner {
  background-image: url("../images/rewards.jpg");
  height: 241px;
}

• rewards class: 부모요소를 기준

 

• bg-left class: rewards class 기준으로 배치
• bg-left class: 가로 50%, 세로 100%
• bg-left class: 배경 색 #272727
• bg-left class: 위로 0, 왼쪽에서 0 위치

 

• bg-right class: rewards class 기준으로 배치
• bg-right class: 가로 50% 세로 100%
• bg-right class: 배경 색 #d5c798
• bg-right class: 위로 0, 오른쪽에서 0 위치

 

• inner class: 배경 이미지 reward.jpg 사용
• inner class: 세로 241px 

---

스타벅스 리워즈--버튼 CSS

.rewards .btn-group {
  position: absolute;
  bottom: 24px;
  right: 0;
  width: 250px;
  display: flex;
  flex-wrap: wrap;
}
.rewards .btn-group .btn.sign-up {
  margin-right: 10px;
}
.rewards .btn-group .btn.sign-in {
  width: 110px;
}
.rewards .btn-group .btn.gift {
  margin-top: 10px;
  flex-grow: 1;
}

• btn-group class: 모든 버튼을 제어
• btn-group class: rewards class 기준
• btn-group class: 아래에서 24px, 오른쪽에서 0 위치
• btn-group class: 가로 250px
• btn-group class: 수평 정렬
• btn-group class: flex-wrap: wrap → 부모 넓이에 맞게 자동 축소 확장

 

• btn sign-up class: 오른쪽 외부여백 10px

 

• btn sign-in class: 가로 110px (기존 설정을 가지지 않음)

 

• btn gift class: 위 외부여백 10px
• btn gift class: 회원가입, 로그인 버튼의 가로 길이만큼 버튼 길이 지정

---

스타벅스 유튜브 영상 배경 HTML

<section class="youtube">
    <div class="youtube__area">
      <div id="player"></div>
    </div>
    <div class="youtube__cover"></div>
    <div class="inner">

      <img src="/./images/floating1.png" alt="Icon" class="floating floating1">
      <img src="/./images/floating2.png" alt="Icon" class="floating floating2">
      <img src="/./images/floating3.png" alt="Icon" class="floating floating3">
    </div>
 </section>

• 영상 위에 사진을 띄운다. (애니메이션 효과를 생성하기 위해서)

---

스타벅스 유튜브 영상 배경 CSS

.youtube {
  position: relative;
  height: 700px;
  background-color: #333;
  overflow: hidden;
}
.youtube .youtube__area {
  width: 1920px;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.youtube .youtube__cover {
  background-image: url("../images/video_cover_pattern.png");
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.youtube .inner {
  height: 700px;
}

• youtube class: 자기 자신 기준
• youtube class: 세로 700px
• youtube class: 배경 색 #333
• youtube class: 넘치는 요소 가림

 

• youtube__area class: 가로 1920px
• youtube__area class: youtube class 기준
• youtube__area class: 왼쪽으로부터 50%, 왼쪽 외부여백 calc함수 계산하여 가운데 기준 정렬
• youtube__area class: 위로부터 50%, 위쪽 외부여백 calc함수 계산하여 가운데 기준 정렬

 

• youtube__area::before class: 콘텐츠 공백
• youtube__area::before class: 블럭요소로 설정
• 가로 100%, 세로 0, padding-top:56.25%로 영상 16:9 비율 유지

 

• youtube__cover class: 유튜브위에 이미지 배경 설정
• youtube__cover class: 투명도 30%로 설정
• youtube__cover class: youtube class 기준
• youtube__cover class: 위에서부터 0, 왼쪽으로부터 0 위치 지정
• youtube__cover class: 가로 100%, 세로 100%

 

• player id: 가로 100%, 세로 100%
• player id: youtube class 기준
• player id: 위로부터 0, 왼쪽으로부터 0 위치 지정

 

• inner class: 세로 700px

---

스타벅스 유튜브 영상 배경--이미지 CSS

.youtube .floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.youtube .floating2 {
  position: absolute;
  top: 350px;
  left: 150px;  
}
.youtube .floating3 {
  position: absolute;
  bottom: -200px;
  right: 0;  
}

• floating1 class: youtube class 기준
• floating1 class: 위로부터 50px 왼쪽으로부터 0 위치 지정

 

• floating2 class: youtube class 기준
• floating2 class: 위로부터 350px, 왼쪽으로부터 150px 위치 지정

• floating3 class: youtube class 기준
• floating3 class: 아래에서부터 -200px, 오른쪽부터 0 위치 지정

---

스타벅스 유튜브 영상 배경 JS

• youtube iframe api 검색
• 아래 사이트로 이동하여 기존 코드 복사
• bHQqvYy5KYo와 같은 video id 복사하여 해당 위치에 붙여넣기
• 아래 코드와 같은 부분만 코드 수정
• videoid를 쓰는 이유는 영상에 관한 수정을 하기 위함이다.

• https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers

function onYouTubeIframeAPIReady() {
  new YT.Player('player', {
    // <div id="player"></div>
    videoId: '8kx8Qxsaeb8', // 최초 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: '8kx8Qxsaeb8' // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      onReady: function (event) {
        event.target.mute() // 음소거
      }
    }
  });
}

• videoId 변경
• autoplay를 통해 자동 재생
• loop를 통해 반복 재생
• playlist에 있는 유튜브 영상 재생
• event target을 mute로 하여 음소거 설정

---

스타벅스 유튜브 영상 배경--이미지 JS

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
// `.toFixed()`를 통해 반환된 문자 데이터를,
// `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}
function floatingObject (selector, delay, size) {
// gsap.to(요소, 시간, 옵션);
gsap.to(
selector, // 선택자
random(1.5, 2.5), // 애니메이션 동작 시간
{ // 옵션
y: size,
repeat: -1,
yoyo: true,
ease: Power1.easeInOut,
delay: random(0, delay)
}
);
}
floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);

• 1.5초부터 2.5초까지 애니메이션 딜레이를 랜덤으로 지정
• size를 이용해 사진 사이즈 지정
• repeat:-1을 이용해 무한반복
• yoyo는 repeat이 반드시 필요한 속성
• yoyo는 내려간 경로와 똑같이 위로 올라온다.
• 아래 사이트를 이용해 그래프 움직임 지정
• https://greensock.com/docs/v2/Easing

Docs

• 딜레이는 0부터 1.5초부터 2.5초까지중 랜덤 지정
• floating1은 딜레이 1초, 사이즈 15
• floating2는 딜레이 0.5초, 사이즈 15
• floating3은 딜레이 1.5초, 사이즈 20

---

스타벅스 유튜브 영상 배경 완성본