jQuery.hover3d.js是一個基于jQuery的輕量級3D懸停動畫插件。它可以讓你的網(wǎng)站或應(yīng)用程序?qū)崿F(xiàn)更加生動、酷炫的效果,吸引用戶的注意力,提高用戶的體驗。下面是一些可以讓你快速上手的指南。
//導(dǎo)入jQuery和jquery.hover3d.js腳本 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.hover3d.js"></script> //初始化元素 $(".box").hover3d({ selector: ".box__card", sensitivity: 20, perspective: 1000, invert: false, shine: false, hoverInClass: "animated flip", hoverOutClass: "animated flipOutX" });
initialize(初始化):通過在 HTML 中添加節(jié)點來初始化插件,或通過調(diào)用現(xiàn)有的 HTML 標記來初始化插件。在這個例子中,“.box”元素被初始化。
sensitivity(靈敏度):指定光標在主軸上移動的距離,觸發(fā) 3D 效果的變化。
perspective(透視):指定立體元素的視角,使其更逼真。
invert(反轉(zhuǎn)):反轉(zhuǎn)容器的背景,使其成為前景。
shine(光澤):給容器添加高亮和反光效果,增強 3D 效果。
hoverInClass(懸停類):指定懸停時添加的 CSS 類。
hoverOutClass(離開類):指定離開時添加的 CSS 類。
總之,jQuery.hover3d.js是一個極好的3D懸停動畫插件,可以提高用戶的體驗,并使網(wǎng)站或應(yīng)用程序更具吸引力和互動性。它還具有很多自定義選項。