vanilla-tilt.js: 一个平滑的3D倾斜javascript库。

秃了个少年头

2258人浏览 · 2022-10-24 10:10:40

秃了个少年头 · 2022-10-24 10:10:40 发布

vanilla-tilt.js: 一个平滑的3D倾斜javascript库。

参考原文链接:https://www.5axxw.com/wiki/content/u3rci5

( 如需查看英文版本，请点击这里 )

vanilla-tilt.js

一个平滑的3D倾斜javascript库

Usage

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

<!-- 在底部插入script -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>

如果要在IE中使用此库，则需要包含CustomEvent polyfill：https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 或者可以考虑 jQuery版本

Options

{
    reverse:                false,  // 是否反转倾斜方向
    max:                    15,     // 最大的倾斜角度(度)
    startX:                 0,      // X轴上的起始倾斜，单位为度。
    startY:                 0,      // Y轴上的起始倾斜，单位为度。
    perspective:            1000,   // 转换角度，越低倾斜越极端
    scale:                  1,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
    speed:                  300,    // 进入/退出 过渡的速度
    transition:             true,   // 是否在进入/退出的时候设置过渡效果
    axis:                   null,   // 设置禁用哪个轴的反转,值为:X或者Y
    reset:                  true,   // 设置在退出时清除倾斜效果
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // 设置进入/退出时过渡的贝塞尔曲线
    glare:                  false,  // 设置是否拥有炫光效果,即透明度渐变效果
    "max-glare":            1,      // 设置最大的透明效果,1=100%,0.5=50%
    "glare-prerender":      false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
    "mouse-event-element":  null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
    "full-page-listening":  false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
    gyroscope:              true,   // 是否开启陀螺仪的方向检测
    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;
    gyroscopeSamples:       10      // How many gyroscope moves to decide the starting position.
}

Events

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
element.addEventListener("tiltChange", callback);

Methods

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);

// 销毁实例
element.vanillaTilt.destroy();

// 获取示例的值
element.vanillaTilt.getValues();

// 重置实例
element.vanillaTilt.reset();

// 他也可以是个node节点列表
const elements = document.querySelectorAll(".js-tilt");
VanillaTilt.init(elements);