Tilt.js:浮動方塊製作、視差懸停傾斜效果 jQuery 插件
2019/01/28
萌芽站長
1,809 0
網站技術 , HTML , JavaScript , jQuery
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
「Tilt.js」是一款可以達到視差懸停傾斜效果(parallax hover tilt effect)的 jQuery 插件,插件本身不需要 CSS,只需要 jQuery 和本身的 .js 檔即可運作。
這個應用非常酷,可以讓網頁上本來平面的方塊(區塊,div)變得很 3D!只要在實現「Tilt.js」的母元素上添加 CSS「transform-style: preserve-3d;」,上面的物件也可以透過 CSS 碼「transform: translateZ(20px);」做出雙層視差懸停傾斜的效果!
可以免費下載使用,相關文檔都在官方網站。

▲ 官方網站截圖。
簡易的安裝教學,</body> 前需要加上:(注意!tilt.jquery.js 請先自行下載到網頁目錄中)
<script src="tilt.jquery.js"></script>
接下來只要向下面這樣在標籤中註明,該區域就會套用效果囉!
<span data-tilt></span>
如果不想用上述方式,也可以透過 JavaScript 呼叫效果:
$('.js-tilt').tilt({
//選項
})
這樣效果就建立完成了!選項的地方可以增加參數,如果是「scale: 1.2」就會讓元素增加放大 1.2 倍的效果,詳細可使用的參數可參考官方文檔。本站於 2019 年初將這個效果套用在網站導覽的方塊,可以去瀏覽看看!
贊助廣告 ‧ Sponsor advertisements
「靜態網頁」與「動態網頁」
📆 2015-01-08
📁
網站技術
Node-RED:啟用使用者身分驗證、建立帳號密碼以保護資訊安全
📆 2021-11-18
📁
網站技術, 資訊安全, 物聯網, Node.js, Node-RED
Color Picker(Visual Studio Code 擴充功能):CSS 色碼調色盤、支援透明度
📆 2019-02-11
📁
軟體應用, 網站技術, CSS
Windows 環境安裝 Node.js 以及 npm & Yarn 兩款熱門 JavaScript 套件管理程式
📆 2019-03-24
📁
軟體介紹, 網站技術, 學業筆記, JavaScript, Node.js
Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題
📆 2019-03-27
📁
網站技術, CSS, JavaScript, Node.js, Gulp
PHP trim() 移除字串兩側空白或指定字串函數
📆 2019-06-28
📁
網站技術, PHP
CSS:屬性border簡單介紹
📆 2013-01-01
📁
網站技術, CSS
HTML <datalist> 輸入欄位可自動補字之下拉選單
📆 2021-10-08
📁
網站技術, HTML
留言區 / Comments
萌芽論壇