JavaScript 라이브러리

lodash

스크롤 action 시 함수를 실행하는 로직 구현 중 스크롤 action 발생 시마다 함수가 실행되는 상황에 lodash 라이브러리를 사용하여 일정 시간에 한 번씩만 함수가 실행되도록 제한을 걸어주었습니다.

 

lodash 라이브러리의 _.throttle() 메서드를 사용하면 함수의 실행에 부하를 주어 인수로 전달한 시간이 지난 후에 함수가 실행되게 할 수 있습니다.

 

 

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

Lodash

 

[사용법]

window.addEventListener("scroll", _.throttle());

handler 함수를 인수로 전달하던 부분에 _.throttle() 메서드를 인수로 전달하여 lodash 라이브러리를 사용해줍니다.

window.addEventListener(
  "scroll",
  _.throttle(() => {
    console.log("scroll!");
  }, 300)
);

_.throttle() 메서드의 첫 번째 인수로 실행할 함수, 두 번째 인수로 밀리 세컨즈 단위의 시간을 전달해 줍니다.

 

두 번째 인수로 전달한 시간이 지나야 첫 번째 인수로 전달한 함수가 실행되게 됩니다.

 

 

 

gsap

gsap은 JavaScript의 애니메이션을 처리해주는 라이브러리입니다.

 

 

 

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

[사용법]

gsap.to(요소, 지속시간, 옵션)

gsap에서 제공하는 to() 메서드를 사용하여 애니메이션을 추가합니다.

 

to() 메서드의 첫 번째 인수로는 애니메이션 처리를 할 요소, 두 번째 인수로는 애니메이션의 지속시간(초 단위), 세 번째 인수로는 해당 애니메이션을 어떻게 처리할지에 해당하는 옵션을 전달해줍니다.

 

*세 번째 인수로 전달하는 옵션은 객체로 전달해줍니다.

 

   if (window.scrollY > 500) {
      // 사이드 배지 숨기기
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
      });
    } else {
      // 배지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
      });
    }

저의 경우 스크롤의 높이 500을 기준으로 사라졌다 나타났다를 애니메이션 처리를 해주기 위해 사용했기 때문에 옵션 객체에 opercity의 값을 0과 1로 조정해주었습니다.

 

gsap을 사용하여 애니메이션 처리를 해 줄 경우 요소의 투명도(저의 경우)가 조정되는 것이지 요소가 사라지는 것이 아니기 때문에 해당 요소가 클릭 이벤트가 포함된 요소의 경우 보이지 않더라도 클릭이 가능하게 됩니다.

 

 if (window.scrollY > 500) {
      // 사이드 배지 숨기기
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
    } else {
      // 배지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
    }

위의 이유 때문에 옵션에 display의 값을 추가로 설정해주었습니다.

 

*display 속성처럼 값이 숫자가 아닌 속성은 전/후 상태의 중간값이 존재하지 않기 때문에, 자연스러운 전환 효과를 적용할 수 없습니다. 

 

[이외 추가 옵션]

delay : 지연시간

 

 

gsap easing 함수

Docs

 

 

swiper

swiper는 요소에 슬라이드 기능을 추가할 수 있는 라이브러리입니다.

 

 

Swiper - The Most Modern Mobile Touch Slider

 

[사용법]

 

HTML 레이아웃을 위의 구조로 설정하고 각 구조별 클래스 명을 설정합니다.

 

<script>
      const swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>

Swiper를 초기화해주고 첫 번째 인수로 Swipoer를 적용할 선택자, 두 번째 인수로 옵션(객체)을 전달해 줍니다.

 

[옵션]

• direction : 슬라이드 방향
• pagination : 페이지 번호 (value로 객체 값을 전달하며, el(페이지 번호 요소 선택자), clickable(클릭 가능 여부) 프로퍼티 설정 가능)
• autoplay : 자동재생 여부
• loop : 자동재생 여부
• slidesPerView : 한 번에 보여줄 슬라이드 개수 
• spaceBetween : 슬라이드 사이 여백
• centeredSlides : 1번 슬라이드 가운데 보이기 (true/false)
• navigation : value로 객체 값을 전달하며, prevEl(이전 버튼 선택자), nextEl(다음 버튼 선택자) 전달

 

 

 

youtube iframe api

youtube iframe api를 사용하면 간편하게 youtube 영상 삽입할 수 있습니다.

 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers

 

[옵션]

• videoId : 최초 재생할 영상의 아이디 (소스코드 복사 시 영상 제어를 할 수 없으므로, 제어하고자 하면 영상의 아이디 값만 할당)
• playerVars : 영상을 재생하기 위한 여러가지 변수 (객체로 값을 할당, autopaly(영상 자동 재생 유무), loop(반복 재생 유무) 설정 가능 - 반복 재생이 true인 경우 playlist 추가 설정 필수(영상의 아이디 값))
• events : 각 이벤트 별 실행한 메서드 설정 

function onYouTubeIframeAPIReady() {
  new YT.Player("player", {
    videoId: "An6LvWQuj_8",
    playerVars: {
      autoplay: true,
      loop: true,
      playlist: "An6LvWQuj_8",
    },
    events: {
      onReady: (event) => {
        event.target.mute(); // 음소거
      },
    },
  });
}

 

 

 

scrollMagic

scrollMagic는 스크롤 위치를 계산하여 애니메이션 처리가 가능한 라이브러리입니다.

 

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

[메서드]

• Scene : scrollMagic 라이브러리를 통해 특정한 요소를 감시하는 옵션을 지정하는 메서드
• setClassToggle : class 속성 토글 제어
• addTo : scrollMagic 라이브러리 사용에 필요한 컨트롤러