face-cursor.js是一款可以根据鼠标位置变化的jQuery和CSS3 3D卡片视觉差特效。该特效以卡片的形式对元素进行布局,在页面中移动鼠标时,插件就会根据鼠标的位置对卡片应用transform: rotate3d()进行3D转换。
安装
可以通过npm来安装该视觉差特效插件。
npm install face-cursor --save
使用方法
使用该视觉差特效需要在页面中引入jquery和face-cursor.js文件。
<script src="jquery.min.js"></script> <script src="face-cursor.js"></script>
HTML结构
使用一个<div>
元素作为容器,里面使用放置需要的内容,可以是图片,也可以是文字。
<div class="card"> <h2>Content</h2> <img src="img/27.jpg"/> </div> <div class="card"> <h2>More content</h2> <p>......</p> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过faceCursor()
方法来初始化该视觉差插件。
$(".card").faceCursor({ // 配置参数 });
配置参数
face-cursor.js插件可用的配置参数有:
-
avertCursor
:元素是面向鼠标,还是朝向鼠标。 -
perspective
:CSS 3D transform的透视度。 -
cacheElementData
:是否缓存元素的宽度、高度和偏移值,而不是每一帧都去计算。如果元素是来回移动的,或者你希望在浏览器尺寸改变时效果持续不变,设置该参数为false。
销毁插件
可以通过下面的方法来销毁指定的插件实例。
$elements.data("plugin_faceCursor").destroy();
或通过下面的方法来销毁所有的实例。
$("*").filter(function() { return $(this).data("plugin_faceCursor") !== undefined }).each(function() { $(this).data("plugin_faceCursor").destroy() });
face-cursor.js插件的github地址为:https://github.com/matthias-vogt/face-cursor.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!