练习视差滚动例子

介绍一下视差

指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

• 说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉,例如js的鼠标坐标移动实现

• 或者相对来说,一个动,另外一个不动,也能造成视觉落差的感觉,例如css的backgroud-attacthment实现

css的backgroud-attacthment实现

属性:

background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 默认值。背景图像会随着页面其余部分的滚动而移动。fixed: 当页面的其余部分滚动时，背景图像不会移动。inherit: 规定应该从父元素继承 background-attachment 属性的设置。初始值: scroll继承性: 否适用于: 所有元素

效果:

例如,当向下滚动鼠标的时候,

1. 背景图像固定了位置(section1和2的背景图会固定在当前浏览器显示界面,并且section1会挡住section2,因为都在同一个位置,然后1比2的位置靠前),

2. 然后页面其他部分就会向上移动(所谓前景,就是section1和2的div dom元素),

3. 向上移动的时候,section2的dom会跟着进入当前页面,所以会慢慢打开section2的画面,

4. 所以看起来背景图被固定住,这样就会造成了一个视觉落差.

代码:

    
                
    
         啊啊啊啊
    
    
         噢噢噢噢
    

javascript实现(鼠标移动)

效果:

通过移动鼠标,不断改变div的位置值来实现移动,并且通过2个不一样的值的变化来实现落差,从而实现视差效果

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';    }

参考引用: