알아두면 유용한 javascript 라이브러리

 

javascript 를 유용하고 간단하게

쓸 수 있도록 사람들이 만들어 둔 것을

라이브러리(cdn)라고 하는데

 

유용한 라이브러리를 소개하고, 쓰는 방법에 대해 안내드려요

 

※js 라이브러리 쓸 때 주의사항※

 1) html에 연결할 때 main.js, common.js 등 본인이 직접 만든 js 보다 위에 적는다

- 가끔 최적화된 환경에서 js가 동작하도록 리셋(초기화) 기능이 있는 라이브러리가 있어서 위에 적어야 합니다.

 

▶gsap cdn (필수)

기본 javaScript 라이브러리로, 필수로 html에 연결시킨다 

https://cdnjs.com/libraries/gsap

 

 

▶swiper.js

슬라이드 효과를 줄 때 유용한 라이브러리다.

https://swiperjs.com/get-started

- 이동 위치 : 위 링크로 이동 > 상단에 get started 클릭 > 'Use Swiper from CDN' 영역에 있는 내용 복붙

1) Use Swiper from CDN 에 <link>와 <script>를 복사하여 html에 붙인다

<link>는 css 쪽에, <script>는 js 쪽에 붙여 넣는다.

 

2) 라이브러리에서 지정한 class를 이용하여 사용에 맞게 적는다

class="swiper" - 모든 것을 감싸는 곳에 붙임(필수 입력 class)
class="swiper-wrapper" - 슬라이드 시키려고 하는 것들을 감싸는 곳에 붙임(필수 입력 class)
class="swiper-slide" - 슬라이드 시킬 것에 붙임(필수 입력 class)
class="swiper-pagination" - 슬라이드 순서를 보여줄 동그라미가 나올 영역에 붙임(사용여부에 따라 생략 가능)
class="swiper-button-prev" - 슬라이드를 이전 페이지로 넘겨줄 버튼으로 쓸 곳에 붙임(사용여부에 따라 생략 가능)
class="swiper-button-next"  - 슬라이드를 다음 페이지로 넘겨줄 버튼으로 쓸 곳에 붙임(사용여부에 따라 생략 가능)
class="swiper-scrollbar" - 슬라이드 영역을 스크롤로 이동, 또는 위치를 보여주려는 곳에 붙임(사용여부에 따라 생략 가능)

 

3) js에 적을 때 어떻게 쓰는 지 참고하기

https://swiperjs.com/swiper-api

- 위치 : 링크 들어가서 > 'Parameters' 영역에 있는 내용으로 효과를 줄 수 있다 

 

▶ScrollMagic.js

마우스 스크롤을 이용하여 효과를 주고 싶을 때 사용한다

단, 일부 css 작업 필요함

https://cdnjs.com/libraries/ScrollMagic

1) min.js라고 적혀있는 것 </> 버튼 클릭 > html에 붙인다

 

2) 각 사용에 맞게 class 부여하기

class="scroll-spy" - 효과를 주는 영역 전체를 감싸는 태그에 붙임
class="back-to-position" - 스크롤에 따라 위치를 변경시키고 싶은 태그에 붙임 
class="to-right" - 오른쪽에서 나타나는 것에 붙인다
class="to-left" - 왼쪽에서 나타나는 것에 붙인다
class="delay-1" - 지연 시간을 주기 위해 붙인다
class="delay-2"
class="delay-3"

 

3) js에 적을 때 어떻게 쓰는 지 참고하기(usage)

https://github.com/janpaepke/ScrollMagic?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library 

4) 각 class에 css 적용하기

 

▶scrollReveal.js cdn

마우스 스크롤을 이용하여 효과를 주고 싶을 때 사용한다

scrollMagic.js 라이브러리랑 비슷하나, css 작업이 없다

https://cdnjs.com/libraries/scrollReveal.js/2.0.0

1) min.js라고 적혀있는 것 버튼 클릭 > html에 붙인다

2) js에 적을 때 어떻게 쓰는 지 참고하기(usage)

https://scrollrevealjs.org/

- 위치 : 링크로 들어가서 > 상단에 API 클릭 > usage 에 있는 내용 보고 사용에 맞게 쓴다

 

▶YouTube 영상 API 사용하기!

https://developers.google.com/youtube/iframe_api_reference?hl=ko 

 

1) 위 사이트에 들어가서'시작하기'영역에 2~3번 내용 복사 후 js에 복붙한다

2) 지원되는 매개 변수 List

아래 사이트에 전부 설명되어 있음(사용에 맞게 쓰고 지우면 됨)

https://developers.google.com/youtube/player_parameters?hl=ko 

 

 

<!Tip> a(anchor)가 동작하지 않도록 하는 방법

href="#" : 화면 이동은 없으나, 화면이 새로고침 됨

href="javascript:void(0)" : 어떠한 화면이동도, 새로고침도 없음