当前位置:主页 > JavsScript库 > 动画 >

JavaScrip交互式视差倾斜效果 - vanilla-tilt.js
栏目分类:动画   发布日期:2021-08-27   浏览次数:

vanilla-tilt.js 是一个轻量级的 JavaScript 库,用于使用requestAnimationFrame在 DOM 元素上创建交互式视差倾斜效果。

类似于 Apple tvOS 的海报视差效果。没有任何依赖项,并且是完全可定制的。

使用:

下载主要的 JavaScript 文件 vanilla-tilt.js 并将其放在网页底部。

<script src="vanilla-tilt.js"></script>

使用 HTMLdata属性将视差倾斜效果应用于您的元素,如下所示:

<div data-tilt></div>

或者使用以下配置选项初始化视差倾斜效果。

VanillaTilt.init(document.querySelectorAll(".element"), {
  reverse: false,
  max: 35,
  perspective: 1000,
  easing: "cubic-bezier(.03,.98,.52,.99)",
  scale: 1,
  speed: 300,
  transition: true,
  axis: null,
  glare: false,
  "max-glare": 1,
  "glare-prerender": false,
  "mouse-event-element": null,
  reset: true
});

API 方法。

// 破坏
element.vanillaTilt.destroy();
 
// 获取值
element.vanillaTilt.getValues();
 
// 重启
element.vanillaTilt.reset();

当倾斜改变时执行一个动作。

element.addEventListener("tiltChange", callback);

官方网站:https://github.com/micku7zu/vanilla-tilt.js

相关热词: vanilla-tilt倾斜效果

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库