当前位置：首页 > 网页特效 > 图片特效

jQuery和CSS3超酷3D多层图片视觉差互动特效

分类：图片特效日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
该视觉差特效的HTML结构如下：

```html
<div class="container">
  <div class="moving-zone">
    <div class="popup">
      <img class="margin" src="img/1.jpg" width="100%">
      <div class="moving-zone-2">
          <div class="popup-2">
        <img src="img/2.png" width="120%">
          </div>
      </div>
    </div>
  </div>
</div>  
```
#####  CSS样式
该视觉差特效的CSS样式非常简单。整个容器设置为50%视口宽度，并居中显示。.moving-zone是透视层，用于制作3D透视空间。.popup和.popup-2分别是2个图片层。

```html
.container {
  width: 50%;
  margin: 40px auto;
}
.moving-zone {
    position: relative;
    width:85%; height:985%;
    margin: auto;
    perspective: 800px;
}
.popup {
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transform-style: preserve-3d;
}
.popup-2 {
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transform-style: preserve-3d;
    left:20%; top:0% !important;
    transform: translateZ(100px) !important;
}
.popup-2 img {
    overflow: hidden;
}        
```          
#####  JavaScript
该视觉差特效使用jQuery代码来计算鼠标的位置，并根据鼠标的位置来相应的改变.popup和.popup-2的旋转角度。

```html
var moveForce = 30;
var rotateForce = 20;
 
$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height(); 
     
    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
     
    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
     
    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
 
    $('.popup-2')
        .css('right', moveX+'px')
        .css('bottom', moveY+'px')
        .css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)');
});
```

web299.com

jQuery和CSS3超酷3D多层图片视觉差互动特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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