根据鼠标位置变化的3D卡片视觉差互动特效

当前位置:主页 > jQuery库 > 视觉差滚动效果 > 根据鼠标位置变化的3D卡片视觉差互动特效
根据鼠标位置变化的3D卡片视觉差互动特效
分享:

    插件介绍

    face-cursor.js是一款可以根据鼠标位置变化的jQuery和CSS3 3D卡片视觉差特效。该特效以卡片的形式对元素进行布局,在页面中移动鼠标时,插件就会根据鼠标的位置对卡片应用transform: rotate3d()进行3D转换。

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-23
    阅读:
简要教程

face-cursor.js是一款可以根据鼠标位置变化的jQueryCSS3 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

网友评论