패스트 캠퍼스 챌린지 13일차

🐣

13일차

 

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Ch 10. 스타벅스 예제

 

---

 

Ch 10. 스타벅스 예제

 

 

주제

 

• 요소 슬라이드
• 유튜브 영상 배경

 

 

주요 내용

 

실습 화면

 

 

새로 알게 된 내용

 

 🔗 Swiper JS 라이브러리  (지난번 거 이어서)

 

youtube 영상 삽입할 때 비율 설정하기

 

 🔗 Youtube iframe API 

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

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

// Youtube IFrame API를 비동기로 로드합니다.
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// onYouTubePlayerAPIReady 함수 이름은,
// Youtube IFrame Player API에서 사용하는 이름이기 때문에,
// 다르게 지정하면 동작하지 않습니다!
// 그리고 함수는 전역(Global) 등록해야 합니다!
function onYouTubePlayerAPIReady() {
  // <div id="player"></div>
  new YT.Player("player", {
    videoId: "An6LvWQuj_8", // 최초 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      // 영상이 준비되었을 때,
      onReady: function (event) {
        event.target.mute(); // 음소거!
      },
    },
  });
}

 

 

🔗 플레이어 매개변수(playerVars)

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API  |  Google Developers

 

 🔗 Gsap Easing 

https://greensock.com/docs/v2/Easing

Docs

 

 🔗 gsap.to 사용법 

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

Docs

repeat: -1, // 몇 번 반복하는지를 설정, `-1`은 무한 반복.

 

---

 

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

 

#패스트캠퍼스

#패캠챌린지

#직장인인강

#직장인자기계발

#패스트캠퍼스후기

#한_번에_끝내는_프론트엔드_개발_초격차_패키지_Online

 

https://bit.ly/37BpXiC

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