스타벅스 정리 3

youtube video

영상 비율처리

.youtube .youtube__area {
  width: 1920px;
  background-color: orange;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);

}

.youtube .youtube__area::before { //before를 사용해 class에 content 추가
  content: "";
  display: block;
  width: 100%;
  height: 0; 
  padding-top: 56.25%; // 16:9 비율로 너비에 맞게 padding으로 높이조절
}

유투브 API

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

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() { //유투브 라이브러리가 찾는 함수이기 때문에, 이름을 바꾸면 안됨
  new YT.Player('player', {
    videoId: 'An6LvWQuj_8', //재생할 유투브 주소의 영상 id
    playerVars: {
      autoplay: true, //자동재생
      loop: true, //반복재생
      playlist: 'An6LvWQuj_8' // 반복재생할 유투브 영상 id
    },
    events: {
      onReady: function (event) { //영상이 준비되면
        event.target.mute() //영상 음소거
      }
    }
  });
}

더 많은 플레이어 매개변수

https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5&hl=ko#Parameters

둥둥 애니메이션

function floatingObject(selector, delay, size) {
  gsap.to(selector, random(1.5, 2.5), { //1.5 ~ 2.5초 사이로 지속시간을 랜덤하게 설정
    y: size, //y축방향인 아래로 20 내려감
    repeat: -1, //무한반복
    yoyo: true, //재생된 애니메이션을 다시 역재생
    ease: Power1.easeInOut, //반복이 튕기지않고 자연스럽게 연결
    delay: random(0, delay) //0 ~ 밑의 지연시간사이로 지연시간을 랜덤하게 설정
  })
}

floatingObject('.floating1', 1, 15)
floatingObject('.floating2', .5, 15)
floatingObject('.floating3', 1.5, 20)

gsap.to()의 속성들

https://greensock.com/docs/v3/GSAP/gsap.to()

RESERVE STORE

3D 애니메이션

.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}

.reserve-store .medal .front,
.reserve-store .medal .back {
  backface-visibility: hidden; //뒷면이면 숨김
  position: absolute;
  transition: 1s;
}

.reserve-store .medal .front {
  transform: rotateY(0deg); //앞버튼은 기본
}

.reserve-store .medal:hover .front {
  transform: rotateY(180deg); //커서를 올려놓으면 Y축 180도 회전
}

.reserve-store .medal .back {
  transform: rotateY(-180deg); //뒷버튼은 애초에 Y축 -180도 회전상태라 안보임
}

.reserve-store .medal:hover .back {
  transform: rotateY(0deg);//뒷버튼에 올려놓으면 다시 기본상태로
}

요소를 정중앙이 아닌 중앙으로만 배치
.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

ScrollMagic

ScrollMagic 라이브러리

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
   integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const spyEls = document.querySelectorAll('section.scroll-spy') //scroll-spy 요소들을 찾아서 spyEls에 저장
spyEls.forEach(function (spyEl) {
  new ScrollMagic
    .Scene({
      triggerElement: spyEl, //해당 클래스를 감지하려고 지정
      triggerHook: .8 //뷰포트의 어느지점에 감지되었는지 판별, 뷰포트 기준으로 top은 0, bottom은 1임. 따라서 0.8이면 거의 아래지점임
    })
    .setClassToggle(spyEl, 'show') //show클래스 추가
    .addTo(new ScrollMagic.Controller()) //ScrollMagic 실행에 꼭 필요한 컨트롤러
})

좌우로 나타나고 사라지는 애니매이션

.back-to-position { //기본상태는 전부 사라지게함
  opacity: 0;
  transition: 1s;
}

.back-to-position.to-right {
  transform: translateX(-150px); //오른쪽으로 이동할 예정이라, 왼쪽으로 150옮김
}

.back-to-position.to-left {
  transform: translateX(150px); //왼쪽으로 이동할 예정이라, 오른쪽으로 150옮김
}

.show .back-to-position { //js의 triggerHook으로 인해, 클래스 show가 생성된다면 실행
  opacity: 1; //나타나고
  transform: translateX(0); //원래 위치로
}

//밑은 다 시간차 딜레이 지정
.show .back-to-position.delay-0 {
  transition-delay: 0s;
}

.show .back-to-position.delay-1 {
  transition-delay: .3s;
}

.show .back-to-position.delay-2 {
  transition-delay: .6s;
}

.show .back-to-position.delay-3 {
  transition-delay: .9s;
}

FOOTER

html에서 특수문자는 각 형식이 지정됨 - https://dev.w3.org/html5/html-author/charref

©

사이에 점 구분

footer .menu li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #555;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -1px;
}

footer .menu li:last-child::before { //마지막은 필요없음
  display: none;
}

가운데정렬

원래 margin: 30px auto 0;식으로 가운데정렬을 하려면 너비인 width가 필요함
footer .logo { //하지만 이미지는 브라우저가 너비를 알고있다고 가정.
  margin: 30px auto 0; 
}

날짜삽입

const thisYear = document.querySelector('.this-year')
thisYear.textContent = new Date().getFullYear() //현재 2021년도 지정

ToTop 버튼

기존 gsap 애니메이션 라이브러리를 포함,

 <!-- ToTop 기능을 위한 gsap ScrollToPlugin 라이브러리-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugin.min.js"
    integrity="sha512-eI+25yMAnyrpomQoYCqvHBmY4dLfqKWPnD4j8y0E3Js+yqpF26xncL4t81M1zxC+ISYfRoCN52rN/n0q2UIBZQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

//totop버튼을 누르면 최상단으로 이동하는 기능
toTopEl.addEventListener('click', function () {
  gsap.to(window, .7, { //window = 브라우저 그 자체
    scrollTo: 0 //화면의 위치를 0px지점으로 옮김
  })
})

로그인

ctrl + h = 단어 바꾸기

<strong>Welcome!</strong>//강조

<for m>//어떤 주소로 데이터가 전송될지 할 수있지만, 여기선 안함
        <input type="text" placeholder="아이디를 입력하세요.">
        <input type="password" placeholder="비밀번호를 입력하세요.">
        <input type="submit" value="로그인"> //로그인버튼을 누르면 form안의 input들을 submit 해줌
      </form>

.signin__card form [type="submit"] { //타입이 submit인 요소 선택
}

.signin__card .actions a { 
  flex-grow: 1; //버튼이 3개이므로 비율 1:1:1로 맞춰짐
  flex-basis: 0; //기본너비 0
}