swiperjs
슬라이드 기능 구현해주는 라이브러리
<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>
<!-- 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>
new Swiper(선택자, 옵션)
자바스크립트 애니메이션 라이브러리
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
나같은 경우는 gsap.to를 이용했다.
gsap.to(요소, 지속시간, 옵션)
gsap.to
gsap 홈페이지 가서 구경해보자!
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
});
});
스크롤이벤트 제어하는 라이브러리
<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>