[JS] tilt.js 사용하기

Vanilla-tilt.js 깃허브 Repo

micku7zu/vanilla-tilt.js

 

tilt.js를 사용하면

html에 tilt 효과를 줄 수 있습니다.

 

설치

깃허브에서 직접 코드를 복사해 js파일을 만들어도 되고,

npm으로도 설치할 수 있다고 합니다.

npm install vanilla-tilt

(이 vanilla-tilt.js는 바닐라 스크립트(jQuery 이용 X, 순수한 자바스크립트)로 작성되었습니다.)

 

기본 사용

vanilla-tilt.js를 사용하려면 위에서 설치를 완료한 후,

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>

이 코드를 html의 body 태그 가장 아래에 넣어주면 됩니다.

("이 코드는 vanilla-tilt.js를 불러오겠다"라는 의미입니다.)

(참고로 티스토리에선 따로 파일을 추가할 경우 images 폴더 안에 저장되기 때문에 src를./images/vanilla-tilt.js로 바꾸어주어야 합니다.)

 

이렇게 불러온 후,

원하는 개체에 tilt 효과를 적용해줍니다.

 

data-tilt 넣기

<div class="your-element" data-tilt></div>

JS 이용

<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
	VanillaTilt.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>

 

이렇게 직접 개체 뒤에 data-tilt를 넣어주어도 되고,

자바스크립트를 작성해 vanilla-tilt.js 밑에 넣어 원하는 클래스의 개체에 적용시켜주는 방법도 있습니다.

 

속성 추가

• data-tilt를 사용한 경우

<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>

data-tilt를 넣은 경우에는 data-tilt 뒤에 data-tilt-max="50"과 같이 넣어주는 방법이 있습니다.

 

• JS로 적용시킨 경우

VanillaTilt.init(document.querySelector(".your-element"), {
	max: 25,
	speed: 400
});

이렇게 속성을 추가해 줄 수 있습니다.

 

• 기본값

{
    reverse:                false,  // reverse the tilt direction
    max:                    35,     // max tilt rotation (degrees)
    startX:                 0,      // the starting tilt on the X axis, in degrees.
    startY:                 0,      // the starting tilt on the Y axis, in degrees.
    perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:                  1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:                  300,    // Speed of the enter/exit transition
    transition:             true,   // Set a transition on enter/exit.
    axis:                   null,   // What axis should be disabled. Can be X or Y.
    reset:                  true    // If the tilt effect has to be reset on exit.
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false   // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    "mouse-event-element":  null    // css-selector or link to HTML-element what will be listen mouse events
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    gyroscope:              true    // Boolean to enable/disable device orientation detection,
    gyroscopeMinAngleX:     -45     // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
    gyroscopeMaxAngleX:     45      // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
    gyroscopeMinAngleY:     -45     // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
    gyroscopeMaxAngleY:     45      // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
}

 

 

예제 코드