Tilt.js:浮動方塊製作、視差懸停傾斜效果 jQuery 插件

2019/01/28 974 1 網站技術 , 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
徵信社有甚麼服務| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社抓姦介紹| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢子女監護權| 馭夫術手段| 合法徵信社推薦| 挖掘徵信社新聞| 打擊小三包二奶| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費可以要多少| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 一日偵探雞排妹|
【業界首推立達徵信FB