建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery视差倾斜悬停效果插件tilt.js

来源:易助科技网浏览量:22收藏

简介


tilt.js是一款实现JQuery视差倾斜悬停效果插件。


JQuery视差倾斜悬停效果插件tilt.js-示例图



使用


1.  引用tilt.js


2. HTML


<div data-tilt></div>


3.  调用


Options


maxTilt:        20,
perspective:    1000,
// Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",
// Easing on enter/exit.
scale:          1,
// 2 = 200%, 1.5 = 150%, etc..
speed:          300,
// Speed of the enter/exit transition.
transition:     true,
// Set a transition on enter/exit.
disableAxis:    null,
// What axis should be disabled. Can be X or Y.
reset:          true,
// If the tilt effect has to be reset on exit.
glare:          false,
// Enables glare effect
maxGlare:       1
// From 0 - 1.


Events


const tilt = $('.js-tilt').tilt();
tilt.on('change', callback);
// parameters: event,
transformstilt.on('tilt.mouseLeave', callback);
// parameters: eventtilt.on('tilt.mouseEnter', callback);
// parameters: event


Methods


const tilt = $('.js-tilt').tilt();

// Destroy instance
tilt.tilt.destroy.call(tilt);

// Get values of instance
tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]

// Reset instance
tilt.tilt.reset.call(tilt);



相关链接


GitHub 地址 :  https://github.com/gijsroge/tilt.js/

官网地址 :  https://micku7zu.github.io/vanilla-tilt.js/

演示地址 :https://www.5axxw.com/wiki/content/qky2v6