Vanilla Tilt不生效且控制台无报错 玻璃拟态卡片倾斜效果无法实现

问题原因 #

• DOM加载顺序错误：你将JS引入和初始化代码放在了.card元素的前面，JS执行时对应DOM节点还未渲染，document.querySelector(".card")获取到的值为null，Vanilla Tilt对空输入不会抛出错误，因此控制台无报错但效果不生效。
• 选择器匹配范围错误：querySelector仅能匹配页面中第一个符合条件的元素，即使顺序调整正确，第二个卡片也无法触发倾斜效果。

解决方案 #

方案1：调整代码顺序（推荐） #

将JS相关代码移动到所有.card元素的末尾，同时遍历所有卡片元素完成初始化，修改后代码如下：

<!-- 卡片DOM放在前面 -->
<div class="card">
  <div class="content">
    <h2>02</h2>
    <h3>Tech Stuff</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur tenetur laborum repellendus maxime excepturi nisi enim? Perferendis est nulla explicabo?</p>
    <a href="#">Check it out</a>
  </div>
</div>

<div class="card">
  <div class="content">
    <h2>03</h2>
    <h3>Tech Stuff</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur tenetur laborum repellendus maxime excepturi nisi enim? Perferendis est nulla explicabo?</p>
    <a href="#">Check it out</a>
  </div>
</div>

<!-- JS代码放在DOM之后 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.querySelectorAll(".card").forEach(card => {
  VanillaTilt.init(card, {
    max: 25,
    speed: 400,
    glare: true,
    "max-glare": 1
  });
})
</script>

方案2：监听DOM加载完成事件 #

如果不想调整代码位置，可以将初始化逻辑包裹在DOMContentLoaded事件回调中，等页面DOM全部渲染完成后再执行初始化：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll(".card").forEach(card => {
    VanillaTilt.init(card, {
      max: 25,
      speed: 400,
      glare: true,
      "max-glare": 1
    });
  })
})

内容的提问来源于stack exchange，提问作者HJTCH76