GSAP(The GreenSock Animation Platform)은 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리이다.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
Lodash는 다양한 유틸리티 기능을 제공하는 자바스크립트 라이브러리로 array, object, 문자, 숫자 자료를 다루기 편하게 해주는 기본함수들을 제공한다. Lodash API에서 더 많은 정보를 확인할 수 있다.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
npm i --save lodash
Swiper는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리이다. Swiper API를 확인할 수 있다.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.css"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
ScrollMagic은 스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리로 ScrollMagic API에서 더 자세한 사항을 확인할 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
AOS는 스크롤 이벤트 시 나타나는 애니메이션을 만들 때 사용하는 라이브러리로 aos site에서 더 자세한 사항을 확인할 수 있다.
<!--css, js cdn 파일 삽입 후 -->
<script>
AOS.init();
</script>
Jquery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. api에서 더 자세한 사항을 확인할 수 있다.
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
chart.js는 차트를 만들 수 있는 라이브러리이다. chart에서 더 자세한 사항을 확인할 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.min.js"></script>
momentjs는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리이다.
npm i moment
TensorFlow.js는 자바스크립트 머신러닝 라이브러리이다.
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
npm install @tensorflow/tfjs
p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고 포용적인 언어를 지향한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
IFrame Player API를 통해 YouTube 동영상을 제어할 수 있다. 플레이어 매개변수(playerVars)를 통해 더 알아볼 수 있다.
<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>
<!-- in BODY -->
<div id="player"></div>
// 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);
function onYouTubePlayerAPIReady() {
// <div id="player"></div>
new YT.Player("player", {
videoId: "", // 재생할 유튜브 영상 ID
playerVars: {
autoplay: true, // 자동 재생 유무
loop: true, // 반복 재생 유무
playlist: "", // 반복 재생할 유튜브 영상 ID 목록
},
events: {
// 영상이 준비되었을 때,
onReady: function (event) {
event.target.mute(); // 음소거
},
},
});
}