자바스크립트 라이브러리 정리

swiperjs

swiperjs
슬라이드 기능 구현해주는 라이브러리

사용법

1. CDN 가져오기 (주의! link테그도 함께 가져오기)

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

2. HTML 레이아웃

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

3. JS에서 swiper초기화

new Swiper(선택자, 옵션)

4. 여러 스타일이 있으니 홈페이지에서 'Demos' 참고

---

gsap

자바스크립트 애니메이션 라이브러리

사용법

gsap

1. CDN 가져오기

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

2. gsap 이해하기

나같은 경우는 gsap.to를 이용했다.
gsap.to(요소, 지속시간, 옵션)

3. 넣고싶은 옵션 공부하기

gsap.to
gsap 홈페이지 가서 구경해보자!

gsap.to로 구현한 코드

html

<div class="gradu_img">
  <div class="item fade-in"><img src="./img/gradu1.png" alt="졸업사진1"></div>
  <div class="item fade-in"><img src="./img/gradu2.png" alt="졸업사진2"></div>
  <div class="item fade-in"><img src="./img/gradu3.png" alt="졸업사진3"></div>
</div>

css

.fade-in{
  opacity: 0;
}

javascript

const fadeEls = document.querySelectorAll('.fade-in');
fadeEls.forEach(function(fadeEl, index) {
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * .8,
    opacity: 1
  });
});

---

lodash

스크롤이벤트 제어하는 라이브러리

사용법

lodash

1. CDN 가져오기

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. _.throttle(함수, 시간)