练习视差滚动例子
介绍一下视差
指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。
通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果
说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉,例如js的鼠标坐标移动实现
或者相对来说,一个动,另外一个不动,也能造成视觉落差的感觉,例如css的backgroud-attacthment实现
css的backgroud-attacthment实现
属性:
background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。
inherit: 规定应该从父元素继承 background-attachment 属性的设置。
初始值: scroll
继承性: 否
适用于: 所有元素效果:
例如,当向下滚动鼠标的时候,
背景图像固定了位置(section1和2的背景图会固定在当前浏览器显示界面,并且section1会挡住section2,因为都在同一个位置,然后1比2的位置靠前),
然后页面其他部分就会向上移动(所谓前景,就是section1和2的div dom元素),
向上移动的时候,section2的dom会跟着进入当前页面,所以会慢慢打开section2的画面,
所以看起来背景图被固定住,这样就会造成了一个视觉落差.
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>视差滚动</title>
<script type="text/javascript"></script>
<style type="text/css">
.article{
/*heigh主要为了看效果,高度差比较大的话,效果会很明显*/
height: 800px;
/*其他参数只是为了保证图片不重复的填充满背景空间,主要关注background-attachment: fixed*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
/*两个区域分别引入两张背景图*/
.section1{
background-image: url( 1.png);
}
.section2{
background-image: url( 1.jpg);
}
</style>
</head>
<body>
<div class="article section1">
啊啊啊啊
</div>
<div class="article section2">
噢噢噢噢
</div>
</body>
</html>javascript实现(鼠标移动)
效果:
通过移动鼠标,不断改变div的位置值来实现移动,并且通过2个不一样的值的变化来实现落差,从而实现视差效果
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--两个div,一个小的,一个大的,来看效果-->
<div id='div1'></div>
<div id='div2'></div>
</body>
</html>css部分
body{
/*为了显示需要*/
width: 100%;
/*因为浏览器的高度获取会出现兼容问题,所以为了方便测试,固定一个值*/
height: 800px;
border: solid 1px blue;
}
#div1{
/*为了显示需要*/
width: 100px;
height: 100px;
border: solid 1px black;
position: absolute;
}
#div2{
/*为了显示需要*/
width: 200px;
height: 200px;
border: solid 1px red;
position: absolute;
}js部分
//获取两个div
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
//获取浏览器的body的宽和高,并且一般来说,body的大小就是浏览器显示界面的大小
var _w = document.body.clientWidth;
var _h = document.body.clientHeight;
//初始化两个div的起始位置为浏览器界面的一半的位置
div1.style.left = _w/2 + 'px';
div1.style.top = _h/2 + 'px';
div2.style.left = _w/2 + 'px';
div2.style.top = _h/2 + 'px';
var ex,ey, ex2,ey2;
//绑定鼠标移动事件onmousemove,只要鼠标移动就会不断接受事件
document.onmousemove = function(e){
//div1移动的距离值
//除以5或者10是为了避免数值太大移出屏幕显示,并且2个不同的数字能够看出区别
ex = e.clientX / 10; //鼠标当前的x坐标除以10
ey = e.clientY / 10; //鼠标当前的y坐标除以10
//div2移动的距离值
ex2 = e.clientX / 5; //同上,除以5是为了看出区别
ey2 = e.clientY / 5;
//div1的left值等于body的一半加上div1的移动值,同类推top值
//这样就是从body的一半(屏幕中间)开始移动
div1.style.left = _w/2 + ex +'px';
div1.style.top = _h/2 + ey + 'px';
div2.style.left = _w/2 + ex2 + 'px';
div2.style.top = _h/2 + ey2 + 'px';
}参考引用:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。