[JavaScript] Tilt.js 사용하기

 

1. Tilt.js 소개

Tilt.js 라이브러리를 사용하면 요소에 마우스의 움직임에 따라 변하는 3D 틸트 효과를 부여할 수 있다.

1.71kb로 가볍고 사용법도 간단해서 쉽고 예쁜 효과를 빠르게 구현할 수 있는 장점이 있다.

gijsroge/tilt.js

 

See the Pen Tilt.js by lpla (@lpla) on CodePen.

 

 

2. Tilt.js 사용법

Tilt.js 라이브러리를 사용하기 위해서는 제이쿼리와 Tilt.js를 추가해야 한다.

<script src="jquery.js"></script>
<script src="tilt.js"></script>

 

틸트 효과를 부여하는 방법은 두 가지로 첫번째는 해당 요소에 data-tilt를 추가하는 것이다.

<div data-tilt></div>

 

두번째는 제이쿼리로 tilt를 실행하는 방법이다.

$('.box').tilt();

 

 

3. Tilt.js 옵션

Tilt.js는 몇 가지 옵션이 존재한다.

개인적으로 기본 세팅은 틸트 효과가 과한 것 같아 선호하지 않고 옵션을 꼭 사용한다.

$('.box').tilt({

  maxTilt:        20,
  perspective:    1000,   // 값이 낮을수록 원근감이 증가한다.
  scale:          1,      // 배율, 1 = 100%, 2 = 200%
  speed:          300,    // 값이 낮을수록 더 빠르게 변한다.
  disableAxis:    null,   // 해당 축을 비활성화한다. 'null', 'x', 'y'
  reset:          true,   // 마우스가 벗어나도 틸트를 유지한다.
  glare:          false,  // 글레어효과를 사용한다.
  maxGlare:       1       // 글레어효과 강도 0-1

});

 

메서드도 몇 가지 있지만 유용한 메서드는 destory.call() 이다.

const tilt = $('.box').tilt();

// tilt 효과를 제거한다.
tilt.tilt.destroy.call(tilt);