1.lodash
lodash는 JavaScript의 인기 있는 라이브러리 중 하나입니다.
보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다루기 위해 사용합니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용합니다.
이런 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다.
throttle 사용
cdn
https://cdnjs.com/libraries/lodash.js
사용법
https://velog.io/@kysung95/짤막글-lodash-알고-쓰자
예
window.addEventListener("scroll", _.throttle(function(){
if(window.scrollY > 500){
//버튼 보이기!
gsap.to("#to-top",.2, {
x:0,
});
}else{
//버튼 숨기기!
gsap.to("#to-top",.2, {
x:100,
});
}
}, 300));
function toTop(event){
console.log(event);
gsap.to(window,.7, {
scrollTo:0,
});
}
2. lowdb
JSON이라는 파일 형식을 이용하여 데이터를 저장하는 아주 간단한 데이터베이스입니다.
JSON이란 숫자, 문자열, 배열, 객체, Boolean으로만 이루어진 데이터 파일이기 때문에, 대부분의 컴퓨터 언어에서 손쉽게 만들고 사용할 수 있습니다.
공식문서
https://github.com/typicode/lowdb
cdn
https://www.jsdelivr.com/package/npm/lowdb
사용법
https://goodmemory.tistory.com/94
3.gsap : 애니메이션 라이브러리
프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다.
CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다.
cdn
https://cdnjs.com/libraries/gsap
사용법
https://velog.io/@kimheewon/GSAP-애니메이션-사용법기초
4.swiper
Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스 JavaScript 라이브러리입니다.
간단한 HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있습니다.
cdn
https://swiperjs.com/get-started
사용법
https://shadesign.tistory.com/entry/swiper-slide-총정리사용법-적용-옵션
5.ScrollMagic
웹퍼블리싱 프로젝트를 하다 보면 고객사의 요청에 의해 스크롤에 따른 애니메이션(동적인 화면)을 구현해야 할 경우가 있습니다.
완성도 높고 화려한 메인 페이지를 만들기 위해서 스크롤 애니메이션을 요청하는 경우도 있습니다.
출처: https://www.biew.co.kr/entry/ScrollMagic-스크롤매직-라이브러리-설치-방법-및-동작원리-제-1편 [웹퍼블리싱 - 퍼블리싱 이야기 맑은커뮤니케이션:티스토리]
공식문서
https://scrollmagic.io/docs/
스타벅스 소스
https://braverokmc79.github.io/starbucks/
https://github.dev/braverokmc79/starbucks
댓글 ( 4)
댓글 남기기