当前位置：首页 > 网页特效 > 背景

jQuery和CSS3简单的背景图片3D视觉差特效

分类：背景日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
这个背景图片3D视觉差特效的HTML结构使用一个div来包裹一组用于制作视觉差效果的子div元素。每一个子div中使用data-offset来指定该层移动的速度。

```html
<div class="scene">
  <div data-offset="90" class="clouds parallax"></div>
  <div data-offset="30" class="trees parallax"></div>
  <div data-offset="20" class="grass parallax"></div>
  <div data-offset="50" class="buildings parallax"></div>
  <div class="ground"></div>
</div>       
```        
#####  CSS样式
视觉差效果中的CSS样式你可以自定义，下面是插件中使用的一些样式。

```html
.scene {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  right: 0;
  border-bottom: 100px solid #342a2a;
  height: 800px;
}
 
.scene > div {
  position: absolute;
  bottom: 0;
}
 
.ground {
  width: 100%;
  height: 30px;
  background: #1d1818;
  z-index: 999;
}
 
.scene > div.clouds {
  width: 895px;
  left: 50%;
  margin-left: -447px;
  height: 255px;
  bottom: 250px;
  background: url(img/WYfbo0O.png) no-repeat center;
}
 
.scene div.trees {
  width: 908px;
  height: 174px;
  background: url(img/4JOfJhg.png) no-repeat center;
  z-index: 100;
  left: 50%;
  bottom: 20px;
  margin-left: -454px;
}
 
.scene div.grass {
  width: 964px;
  height: 37px;
  z-index: 200;
  left: 50%;
  bottom: 20px;
  margin-left: -482px;
  background: url(img/h0aXbZr.png) no-repeat center;
}
 
.buildings {
  width: 763px;
  height: 303px;
  left: 50%;
  margin-left: -400px;
  background: url(img/5LmAigM.png) no-repeat center;
}    
```            
#####  JAVASCRIPT
首先引入jQuery文件。

```html
<script src="js/jquery-1.11.1.min.js"></script>  
```              
然后使用下面的代码来制作背景图片3D视觉差效果：

```html
$(window).on('mousemove', function(e) {
  var w = $(window).width();
  var h = $(window).height();
  var offsetX = 0.5 - e.pageX / w;
  var offsetY = 0.5 - e.pageY / h;
 
  $(".parallax").each(function(i, el) {
    var offset = parseInt($(el).data('offset'));
    var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";
 
    $(el).css({
    '-webkit-transform': translate,
    'transform': translate,
    'moz-transform': translate
    });
  });
});      
```

web299.com

jQuery和CSS3简单的背景图片3D视觉差特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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