浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2016-08-29

人气7560

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款简单但效果非常酷的jQueryCSS3背景图片3D视觉差特效。该背景图片3D视觉差特效使用jQuery、 CSS3 transform 和translate3d来在鼠标移动时,以不同的速度移动一组带背景图片的DIV层,形成视觉差效果。

使用方法

HTML结构

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

<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样式你可以自定义,下面是插件中使用的一些样式。

.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文件。

<script src="js/jquery-1.11.1.min.js"></script>                
              

然后使用下面的代码来制作背景图片3D视觉差效果:

$(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
    });
  });
});               
              

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:95.27KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1917.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3简单的背景图片3D视觉差特效

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有2 评论)