如何用vanilla-tilt库实现网页元素平滑3D倾斜效果？

2026-03-31 15:491阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计2843个文字，预计阅读时间需要12分钟。

如何用vanilla-tilt库实现网页元素平滑3D倾斜效果？

目录 + 参考内容 + 描述 + 获取 + vanilla-tilt + 特点 + 使用 + 总结 + 参考内容 + 项目 + 描述 + GitHub + 前往 + Vanilla-tilt.js + 前往 + 描述 + 项目 + 描述 + 操作系统 + Windows 10 + 专业版 + Edge 108.0.1462.54 (正式版本) + (64位) + vanilla-tilt.js 1.8.0 + 获取

目录
  • 参考
  • 描述
  • 获取
  • vanilla-tilt
    • 特点
    • 使用
  • 总结

    参考

    项目描述GitHub前往Vanilla-tilt.js前往

    描述

    项目描述操作系统Windwos 10 专业版Edge108.0.1462.54 (正式版本) (64 位)vanilla-tilt.js1.8.0

    获取

    • Vanilla-tilt.js
    • GitHub
    • npm

    npm install vanilla-tilt

    vanilla-tilt

    vanilla-tilt.js 是 JavaScript 中的一个平滑的 3D 倾斜库，该库存在 JQuery 版本——Tilt.js 。

    特点

    vanilla-tilt 存在以下特点：

    • 轻量级
    • 无依赖项
    • 使用简单
    • 60 FPS
    • 丝滑

    使用

    示例

    如何用vanilla-tilt库实现网页元素平滑3D倾斜效果？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 15 // 设置倾斜的最大角度 }); </script> </body> </html>

    效果：

    使用

    为目标元素应用倾斜样式可以有两种方式。

    1. data-tilt

    我们可以通过为元素添加属性 data-tilt 来指定该元素为目标元素并为其应用默认的倾斜配置。如果对默认的倾斜配置中的某个选项不满，需要对其进行更换，则可以通过为目标元素添加合适的属性并为其设置满意的属性值即可。

    如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 25。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card" data-tilt data-tilt-max="25"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> </body> </html>

    效果：

    2. VanillaTilt.init()

    VanillaTilt.init() 函数接收两个参数，第一个参数为需要添加倾斜效果的元素对象，第二个参数则是用于添加倾斜效果的配置对象。

    如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 25。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 25 }) </script> </body> </html>

    优先级

    当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都将失效。

    示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card" data-tilt data-tilt-max="70"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 10, scale: 2 // 在鼠标悬停于目标元素之上时，将目标元素放缩指定倍数 }) </script> </body> </html>

    效果：

    可以看到目标元素使用了 data-tilt-max 所设定的配置选项的值，忽视了 VanillaTilt.init() 提供的 max 及 scale 。

    配置选项

    项目默认值描述reversefalse反转倾斜方向（设置为 true 时，鼠标在目标元素悬浮时该处会向屏幕内测倾斜，默认向屏幕外侧倾斜）max35最大倾斜角度。scale1设置鼠标悬浮于目标元素时，目标元素的放缩倍数。glarefalse如果设置为 True，则会在鼠标悬停的位置制造反光效果，反光效果仅出现在目标元素的下面部分。max-glare1设置反光强度，取值范围为 0~1，该配置选项的值越是接近于 1 反光强度越大。反光强度的大小可以理解为 照到目标元素的那束光的光照强度 。该配置选项为 0 时与 glare 设置为 false 时的效果无异。axisnull设置被激活的坐标轴，被禁用的坐标轴将不会产生倾斜效果。该配置选项的取值有 x、y 及 null。其中 null 表示同时激活 x 与 y 轴。resettrue当该选项设置为 false 时，鼠标若离开目标元素，目标元素将维持鼠标离开前的状态（倾斜状态及放缩状态）。若该选项设置为 true，鼠标若离开目标元素，目标元素将被去除倾斜状态及放缩状态。startX0设置目标元素在 x 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。startY0设置目标元素在 y 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。reset-to-starttrue若该选项设置为 true，鼠标离开目标元素时，目标元素的倾斜状态将恢复至配置选项 startX 及 startY 指定的倾斜状态。full-page-listeningfalse当该配置选项设置为 true 时，目标元素将响应当前页面的任何鼠标移动（鼠标即使没有悬停在目标元素中，也可以通过鼠标移动控制目标元素的倾斜状态）。

    其他

    配置选项中还存在其他选项，但目前这些选项我并没有弄清楚他们的用法。为避免误人子弟，我并没有对这些选项进行翻译，请见谅。

    项目默认值描述gyroscopetrueBoolean to enable/disable device orientation detection.gyroscopeMinAngleX-45This 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.gyroscopeMaxAngleX45This 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-45This 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.gyroscopeMaxAngleY45This 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.mouse-event-elementnullcss-selector or link to HTML-element what will be listen mouse events.glare-prerenderfalsefalse = VanillaTilt creates the glare elements for you, otherwise you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself.easingcubic-bezier(.03,.98,.52,.99)Easing on enter/exit.speed300Speed of the enter/exit transition.perspective1000Transform perspective, the lower the more extreme the tilt gets.transitiontrueSet a transition on enter/exit.

    总结

    到此这篇关于JavaScript库之vanilla-tilt使用教程的文章就介绍到这了,更多相关JS库vanilla-tilt使用内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！

    标签：javascript库之vanillatilt使用

    相关推荐

    13500gitee图床失效后，如何更换或修复替代方案？13501Linux系统安装Git的命令具体是什么？13508Gitee最近发生了什么重大事件，导致用户讨论热度上升？13510如何将前后端分离的Git项目进行改写以适应长尾词策略？13514如何在Gitee上精准搜索特定类型或标签的项目？13523如何详细安装GitLab客户端到我的Mac笔记本电脑上？13526GitLab因维护升级，为何突然禁止新用户注册呢？这是怎么回事？13544如何才能在git中彻底删除一个仓库文件夹呢？13545如何具体在Windows 7系统上安装并配置GitLab服务器？13546如何设置git忽略特定文件不被追踪？13547如何使用三个命令一次性取消git目录？13551如何将Gitee仓库中的项目迁移或复制到其他平台？13558如何搭建Win系统下的个人Git远程仓库？13559如何在Gitee上搭建个人网站并实现个性化定制？13561Go语言的设计与实现以及Github开源项目改写，有哪些独特之处和挑战？13564如何修改Git上文件（夹）的大小写大小？

    本文共计2843个文字，预计阅读时间需要12分钟。

    如何用vanilla-tilt库实现网页元素平滑3D倾斜效果？

    目录 + 参考内容 + 描述 + 获取 + vanilla-tilt + 特点 + 使用 + 总结 + 参考内容 + 项目 + 描述 + GitHub + 前往 + Vanilla-tilt.js + 前往 + 描述 + 项目 + 描述 + 操作系统 + Windows 10 + 专业版 + Edge 108.0.1462.54 (正式版本) + (64位) + vanilla-tilt.js 1.8.0 + 获取

    目录
    • 参考
    • 描述
    • 获取
    • vanilla-tilt
      • 特点
      • 使用
    • 总结

      参考

      项目描述GitHub前往Vanilla-tilt.js前往

      描述

      项目描述操作系统Windwos 10 专业版Edge108.0.1462.54 (正式版本) (64 位)vanilla-tilt.js1.8.0

      获取

      • Vanilla-tilt.js
      • GitHub
      • npm

      npm install vanilla-tilt

      vanilla-tilt

      vanilla-tilt.js 是 JavaScript 中的一个平滑的 3D 倾斜库，该库存在 JQuery 版本——Tilt.js 。

      特点

      vanilla-tilt 存在以下特点：

      • 轻量级
      • 无依赖项
      • 使用简单
      • 60 FPS
      • 丝滑

      使用

      示例

      如何用vanilla-tilt库实现网页元素平滑3D倾斜效果？

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 15 // 设置倾斜的最大角度 }); </script> </body> </html>

      效果：

      使用

      为目标元素应用倾斜样式可以有两种方式。

      1. data-tilt

      我们可以通过为元素添加属性 data-tilt 来指定该元素为目标元素并为其应用默认的倾斜配置。如果对默认的倾斜配置中的某个选项不满，需要对其进行更换，则可以通过为目标元素添加合适的属性并为其设置满意的属性值即可。

      如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 25。

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card" data-tilt data-tilt-max="25"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> </body> </html>

      效果：

      2. VanillaTilt.init()

      VanillaTilt.init() 函数接收两个参数，第一个参数为需要添加倾斜效果的元素对象，第二个参数则是用于添加倾斜效果的配置对象。

      如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 25。

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 25 }) </script> </body> </html>

      优先级

      当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都将失效。

      示例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vanilla-tilt</title> <style> *{ /* 去除元素默认的内外边距 */ margin: 0px; padding: 0px; } body{ /* 设置显示区域的最小高度值为显示窗口的高度值 */ min-height: 100vh; /* 使 body 中的元素居中显示 */ display: flex; justify-content: center; align-items: center; } #card{ /* 为目标元素指定宽高并为其设置渐变背景颜色 */ width: 200px; height: 200px; background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180)); } </style> </head> <body> <!-- 需要添加 3D 倾斜特效的元素 --> <div id="card" data-tilt data-tilt-max="70"></div> <!-- 导入 vanilla-tilt.js --> <script src="./vanilla-tilt.js"></script> <script> VanillaTilt.init(document.querySelector('#card'), { max: 10, scale: 2 // 在鼠标悬停于目标元素之上时，将目标元素放缩指定倍数 }) </script> </body> </html>

      效果：

      可以看到目标元素使用了 data-tilt-max 所设定的配置选项的值，忽视了 VanillaTilt.init() 提供的 max 及 scale 。

      配置选项

      项目默认值描述reversefalse反转倾斜方向（设置为 true 时，鼠标在目标元素悬浮时该处会向屏幕内测倾斜，默认向屏幕外侧倾斜）max35最大倾斜角度。scale1设置鼠标悬浮于目标元素时，目标元素的放缩倍数。glarefalse如果设置为 True，则会在鼠标悬停的位置制造反光效果，反光效果仅出现在目标元素的下面部分。max-glare1设置反光强度，取值范围为 0~1，该配置选项的值越是接近于 1 反光强度越大。反光强度的大小可以理解为 照到目标元素的那束光的光照强度 。该配置选项为 0 时与 glare 设置为 false 时的效果无异。axisnull设置被激活的坐标轴，被禁用的坐标轴将不会产生倾斜效果。该配置选项的取值有 x、y 及 null。其中 null 表示同时激活 x 与 y 轴。resettrue当该选项设置为 false 时，鼠标若离开目标元素，目标元素将维持鼠标离开前的状态（倾斜状态及放缩状态）。若该选项设置为 true，鼠标若离开目标元素，目标元素将被去除倾斜状态及放缩状态。startX0设置目标元素在 x 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。startY0设置目标元素在 y 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。reset-to-starttrue若该选项设置为 true，鼠标离开目标元素时，目标元素的倾斜状态将恢复至配置选项 startX 及 startY 指定的倾斜状态。full-page-listeningfalse当该配置选项设置为 true 时，目标元素将响应当前页面的任何鼠标移动（鼠标即使没有悬停在目标元素中，也可以通过鼠标移动控制目标元素的倾斜状态）。

      其他

      配置选项中还存在其他选项，但目前这些选项我并没有弄清楚他们的用法。为避免误人子弟，我并没有对这些选项进行翻译，请见谅。

      项目默认值描述gyroscopetrueBoolean to enable/disable device orientation detection.gyroscopeMinAngleX-45This 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.gyroscopeMaxAngleX45This 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-45This 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.gyroscopeMaxAngleY45This 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.mouse-event-elementnullcss-selector or link to HTML-element what will be listen mouse events.glare-prerenderfalsefalse = VanillaTilt creates the glare elements for you, otherwise you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself.easingcubic-bezier(.03,.98,.52,.99)Easing on enter/exit.speed300Speed of the enter/exit transition.perspective1000Transform perspective, the lower the more extreme the tilt gets.transitiontrueSet a transition on enter/exit.

      总结

      到此这篇关于JavaScript库之vanilla-tilt使用教程的文章就介绍到这了,更多相关JS库vanilla-tilt使用内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！