当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(2) 评论(0)

简介

用该视觉差特效需要在页面中引入jquery和face-cursor.js文件。

```html
<script src="jquery.min.js"></script>
<script src="face-cursor.js"></script> 
```                 
#####  HTML结构
使用一个div元素作为容器，里面使用放置需要的内容，可以是图片，也可以是文字。

```html
<div class="card">
    <h2>Content</h2>
    <img src="img/27.jpg"/>
</div>
<div class="card">
    <h2>More content</h2>
    <p>......</p>
</div>      
```     
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过faceCursor()方法来初始化该视觉差插件。

```html
$(".card").faceCursor({
  // 配置参数
});      
```           
#####  配置参数
- face-cursor.js插件可用的配置参数有：

- avertCursor：元素是面向鼠标，还是朝向鼠标。
- perspective：CSS 3D transform的透视度。
- cacheElementData：是否缓存元素的宽度、高度和偏移值，而不是每一帧都去计算。如果元素是来回移动的，或者你希望在浏览器尺寸改变时效果持续不变，设置该参数为false。
#####  销毁插件 销毁插件
可以通过下面的方法来销毁指定的插件实例。

```html
$elements.data("plugin_faceCursor").destroy();                  
```
或通过下面的方法来销毁所有的实例。

```html
$("*").filter(function() {
    return $(this).data("plugin_faceCursor") !== undefined
}).each(function() {
    $(this).data("plugin_faceCursor").destroy()
});  
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果