マウスホバーをすると要素が滑らかに動く jQueryエフェクトライブラリ「Tilt.js」の紹介です。

要素エフェクトと言えば 要素がスッと消える"Fade out", 回転する"Rotate"、反転する "Flip"、
エフェクトライブラリは数多くリリースされていますが、中でも有名所は"animate.css"ではないでしょうか?

そんな数あるエフェクトの中でも、リリースされたばかりの面白いライブラリが「Tilt.js」です。

* tilt.js

Tilt.jsはマウスホバーすると、要素を上下左右に滑らかに傾けてくれるエフェクトをかけてくれます。
( * 滑らか度は60 FPS だそうです)

Tilt.jsのインストール

Tilt.jsはこちらのGitHubのレポジトリページからダウンロードするか、コマンドライン上からパッケージマネージャーを使って入手できます。
( * jQueryに依存しているので、事前にjQueryを導入している必用があります )

# npm
npm install tilt.js --save
# yarn
yarn add tilt.js
<!-- ブラウザ上で使う場合 -->
<script src="jquery.js" ></script> <!-- jQuery の読み込み -->
<script src="tilt.jquery.min.js"></script> <!--  Tilt.js の読み込み -->


Tilt.jsの使い方

Tilt.jsの使い方は簡単で、エフェクトをかけたい要素に'data-tilt'を追加するだけで、冒頭のgifのようなエフェクトが適応されます。
( * 要素がimgでも問題ありません )

<div data-tilt></div> <!-- 要素にtiltを適応させる -->


その他にも幾つかオプションが用意されておりtitl関数内にオブジェクトを噛まして、
ホバーした時のエフェクトの操作や、コールバックを書くこともできます。

// ホバー時の傾きを維持する
$('.js-tilt').tilt({
    reset: false
});
// グレアエフェクト
$('.js-tilt').tilt({
    glare: true,
    maxGlare: .5
});
// 拡大
$('.js-tilt').tilt({
    scale: 1.2
});
// 横エフェクトのみに制御
$('.js-tilt').tilt({
    axis: x
});
// 縦エフェクトのみに制御
$('.js-tilt').tilt({
    axis: y
});
// 要素にエフェクトがかかった時のコールバックを適応
var tilt = $('.js-tilt').tilt()
tilt.on('change', function(e, transforms){
 // your callback
});


* 自身の環境でTilt.jsを実際に使った動画


Summary

以上がTilt.jsの紹介でした。

今回紹介したTilt.jsはjQuery用でしたが、jQueryに依存していないバージョンもリリースされています。
( jQuery非依存バージョン: vanilla-tilt.js )

サイトのロゴ画像や、ニュースサイトなどの記事一覧時の画像に適応させたりと、Webサイトに一工夫加えたい時に便利そうなライブラリですね!

GitHub: gijsroge/tilt.js

 

この記事のカテゴリ

プログラミング

この記事のタグ

Webデザイン , jsライブラリー

Socialシェアボタン

スポンサーリンク