標籤

｜JS Package｜Create a 3D Parallax hover effect with Vanilla-tilt.js

Create a 3D Parallax hover effect with Vanilla-tilt.js

Vanilla-tilt.js是一款輕量級的 JavaScript 套件，可輕鬆實現 3D 視差懸停效果。它特別適合用於提升網頁互動性。

將 vanilla-tilt.js 添加在閉合的 </body> 前，確保在頁面其他內容加載完成後執行。

html

pic-block 是包含所有內容的主要容器，tt-block 是放置文字內容的區塊，img-block 是圖片的容器。

html


     

         
Title

         
Lorem ipsum dolor sit amet, ut pro case reque iudicabit, 
            elit sanctus convenire eu ius. Te nec dicit oblique saperet.

啟用 3D 效果需將視差區塊添加 transform-style:preserve-3d;，而視差區塊內元素添加 transform:translateZ();。

css
.pic-block{ 
      transform-style:preserve-3d; /* 視差區塊 需添加3D透視屬性 */
}
.pic-block .tt-block{ 
     transform:translateZ(100px); /* 視差元素 需添加Z軸距離 */
}

在 </body> 前，和 vanilla-tilt.js 連結後，寫以下設定：

script
// 要添加 3D Parallax hover effect 區塊
VanillaTilt.init(document.querySelectorAll(".pic-block"), {
        max:10,
        speed:50
});

圖素來源：
AIPICT（https://aipict.com/）

標籤：