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

jQuery和CSS3可互动的背景视觉差效果

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

简介

##### HTML结构
该视觉差特效的HTML结构非常简单，使用一个div元素作为包裹元素，在它里面使用一个空的div元素作为页面的背景层。

```html
<div class="wrap">
  <div class="bg"></div>
  <h1>......</h1>
</div>   
```               
#####  CSS样式
包裹元素div.wrap使用相对定位，高度设置为100%，超出屏幕的部分全部隐藏。

```html
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}      
```            
背景层需要采用绝对定位，宽度和高度都为100%，背景图片使用background-size: cover;来设置，使图片占据整个屏幕。

```html
.wrap .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../img/mountains.jpg") no-repeat center center;
  background-size: cover;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}             
```     
#####  JavaScript
要激活背景视觉差效果，只需要使用下面的简单的JavaScript代码即可。

```html
var lFollowX = 0,
      lFollowY = 0,
      x = 0,
      y = 0,
      friction = 1 / 30;
 
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
 
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
 
$('.bg').css({
  '-webit-transform': translate,
  '-moz-transform': translate,
  'transform': translate
});
 
window.requestAnimationFrame(moveBackground);
}
 
$(window).on('mousemove click', function(e) {
 
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
 
});
 
moveBackground();  
```

web299.com

jQuery和CSS3可互动的背景视觉差效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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