图片/图形
jQuery+CSS3可互动的背景视觉差效果
PetitQ
这是一款效果非常酷的 jQuery 和 CSS3 可互动的背景视觉差效果。该视觉差特效在鼠标移动的时候，背景图片和前景的文字会以不同的速度移动，产生视觉差效果。
使用方法
该视觉差特效的 HTML 结构非常简单，使用一个<div>元素作为包裹元素，在它里面使用一个空的<div>元素作为页面的背景层。
也想出现在这里？联系我们吧
<div class="wrap">
<div class="bg"></div>
<h1>......</h1>
</div>
CSS 样式
包裹元素 div.wrap 使用相对定位，高度设置为 100%，超出屏幕的部分全部隐藏。
.wrap {
height: 100%;
position: relative;
overflow: hidden;
}
背景层需要采用绝对定位，宽度和高度都为 100%，背景图片使用 background-size: cover;来设置，使图片占据整个屏幕。
.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 代码即可。
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();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
