웹( HTML, CSS, JS )(08.02) - imagesLoaded, ScrollTrigger, nicescroll

imagesLoaded

imagesLoaded는 문서 안에 또는 특정 요소 안에 있는 이미지가 모두 로딩되었는지 감지하는 자바스크립트 라이브러리이다.

이미지가 로딩되기 전에, 로딩 중에 있을 때, 로딩된 후에 어떤 작업을 하고 싶을 때 유용하다.

 

cdnjs에서 imagesLoaded를 가져오고 jquery아래 masonry위에 두어야 정상작동된다.

$(".box-1").imagesLoaded(function(){
  let $grid = $(".box-1").masonry();
  
  $(".loading-box").addClass("hide");
});

-> .box-1의 후손까지 로딩되면 실행!
-> 장소에 따라 인터넷 걸리는 시간이 다르기에 진짜로 걸리는 시간만큼만 로딩창을 띄우기 위해 사용한다.

 

ScrollTrigger

• ScrollTrigger는 최소한의 코드로 스크롤 기반 애니메이션을 만든다.

gsap.to(대상, {
	scrollTrigger:{
    	trigger:대상,
        스크롤속성:값,
        스크롤속성:값
	}, 속성:값, duration:재생시간
})

 

nicescroll

css에서 overflow: auto를 사용하면, 크기를 벗언라 시 자동으로 스크롤 바가 생긴다. nicescroll적용함으로써 스크롤 바가 계속 남아있지않고, 아이폰 스크롤바처럼 사라지고, 공간도 차지하지 않는다.

$('body').niceScroll();

jquery 링크 다음 cdnjs에서 nicescroll 링크를 가져와 아래에 넣어주어야 정상작동된다.