라이브러리

swiper는 슬라이드 라이브러리로 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자동으로 슬라이드가 넘어가게 할 수도 있는 것이다.다양한 메소드와 설정을 지원해서 사용하기 매우

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다.하지만!! 사용자

어떤 애니메이션 효과를 만들지 만큼 중요한 것이언제 효과를 보여줄 것인가이다.내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다.공식 사이트 혹은 CDN 혹은 npm 등 편한 방법

프로젝트 작업중 이미지들이 위의 핀터레스트 이미지들 처럼 배열을 하고 싶어져 css로 고군부트를 했는데...masonry라는 간단한 라이브러리를 알게되어 정리를 하려고 한다.아래의 링크로 들어가 js를 복붙하여 사용한다.🔗 masonry.js 링크width의 고정법

웹사이트 스크롤을 할 때 마우스 휠에 따라 살짝 살짝 끊기는 형태를 많이 보았을 것이다.이런 부분이 없이 스무스~하게 스크롤이 되도록 하는 라이브러리를 찾아 기록해두려 한다.위의 이미지와 같이 일반적인 스크롤 할 때의 모습은 이러하다.lenis 라이브러리를 사용한다면

요즈음 사이트에서 많이 볼 수 있는 스크롤(wheel)시에섹션별로 페이지가 넘어가도록 하는 기능을 정리해보려고 합니다. 지금은 그냥 영역을 나누기만 해서 간단하지만 나중에 포트폴리오를 작성할 때는<div> 태그 안에다가 원하는 내용을 작성! (css는 생략)우리가

lozad.js는 이미지 지연 로딩에 특화된 Intersection API 구현 사례라고 할 수 있다.복잡한 설정 필요 없이 이미지 태그에 라이브러리가 요구하는 속성을 추가한 후옵저버 인스턴스를 생성하면 이미지 지연 로딩이 간단히 구현된다.이것이 전부다. lozad.j