hover3d.js是一款效果超酷的鼠标滑过图片3D卡片效果jQuery插件。通过该插件可以制作出鼠标滑过图片时,图片3D倾斜,旋转的效果,非常有层次感。
使用方法
使用该jQuery插件需要在页面中引入jquery和jquery.hover3d.min.js文件
<script src="src/jquery.min.js"></script> <script src="src/jquery.hover3d.min.js"></script>
HTML结构
该鼠标滑过图片效果的HTML结构如下:包裹元素和它里面的子元素将被之后为3D卡片效果。
<div class="project"> <div class="project__card"> <!-- Content element goes here --> </div> </div>
CSS样式
该特效不需要特别的CSS样式,你可以指定自己的CSS样式。但是你可以为鼠标滑入和滑出图片时添加下面的辅助class类。
/* This class can be replaced using options */ .hover-in{ transition: .3s ease-out; } .hover-out{ transition: .3s ease-in; }
初始化插件
在页面加载完毕之后,可以通过下面的方法来初始化该插件。
$(".project").hover3d({ selector: ".project__card" });
配置参数
参数 | 类型 | 默认值 | 描述 |
selector | string | null | 3D卡片的选择器元素 |
perspective | integer | 1000 | 3D透视的深度 |
sensitivity | integer | 20 | 鼠标移动的灵敏度,数值越大越不灵敏 |
invert | boolean | false | 默认行为是元素会跟随鼠标,就像元素一直面向鼠标 |
hoverInClass | string | hover-in | 鼠标滑入时的辅助class类,会在300毫秒后移除 |
hoverOutClass | string | hover-out | 鼠标滑出时的辅助class类,会在300毫秒后移除 |
hoverClass | string | hover-3d | 鼠标滑过图片时的辅助类 |
hover3d.js插件的github地址为:https://github.com/ariona/hover3d
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!