cdnjs
제이쿼리를 사용하려면 cdnjs에서 소스를 가져오면 된다.
masonry
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>- 핀터레스트 레이아웃처럼 구현할 수 있다.
imagesLoaded
- 이미지가 '로딩되기 전/ 로딩 중/ 로딩된 후'에 특정 작업을 하고 싶을때 유용하게 사용된다.
예제 - 무작정 5초 기다리는 로딩화면
setTimeout(function () {
let $grid = $(".box-1").masonry();
$(".loading-box").addClass("hide");
}, 3000);예제 - 스마트하게 로딩화면 구현
$('.box-1').imagesLoaded(function() {
let $grid = $('.box-1').masonry();
$('.loading-box').addClass('hide');
});scrollTrigger
-
GSAP의 플러그인 중 하나로, 스크롤 이벤트를 사용하여 애니메이션 효과를 제어할 수 있도록 하는 도구
-
최소한의 코드로 스크롤 기반 애니메이션을 만든다.
-
gsap와scrollTrigger모두 가져와야 한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>예제
niceScroll
- css에서
overflow:atuo를 사용하면, 크기를 벗어날 시 자동으로 스크롤 바가 생긴다.niceScroll적용하면 스크롤 바가 계속 남아있지 않고, 아이폰 스크롤 바처럼 사라지고, 공간도 찾지 않는다.
예제1
nicescroll 사용시 무조건 추가해야하는 작업
범용 niceScroll Bar 라이브러리
svg
- svg는 확장 가능한 벡터 그래픽의 줄임말이다.
