练习视差滚动例子_byKL

wangbinke 发布于2019-08-21 15:26 / 1416人阅读

摘要：练习视差滚动例子介绍一下视差指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。背景图像会随着页面其余部分的滚动而移动。

练习视差滚动例子 介绍一下视差

指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。
通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉,例如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的画面,

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

代码:




    
    视差滚动
    
    



    啊啊啊啊


    噢噢噢噢

javascript实现(鼠标移动)

效果:

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

html部分




    
    Title

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

参考引用:

视差滚动(Parallax Scrolling)效果的原理和实现

云服务器 GPU云服务器滚动视差视差滚动视差滚动效果 _byKL

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88181.html

练习倒计时例子_v1.0-byKL

摘要：练习倒计时例子倒计时就是时间一秒秒的倒数一般都是目标时间跟现在时间进行比较部分结果部分对象的使用对象基于年月日世界标准时间起的毫秒数返回的是毫秒数传入的参数表示日期的字符串值。练习倒计时例子倒计时就是时间一秒秒的倒数,一般都是目标时间跟现在时间进行比较 html部分 set 结果: js部分 Date对象的使用 Date 对象基于1970年1月1日（世...

heartFollower 2019-08-21 15:27 评论0 收藏0
用 Stellar.js 制作视差滚动效果

摘要：近些年讨论得很热烈的设计趋势是视觉差滚动效果。在本教程中，我会介绍视觉差滚动和用插件来制作视觉差滚动效果。如果你想使用，可以通过以下命令下载好后，在页面中引用完成后，开始给页面添加视觉差滚动效果。在一个页面运用创建一个视差滚动效果的示例。近些年讨论得很热烈的设计趋势是视觉差滚动效果。不管你喜不喜欢，很多网站都在用它。在本教程中，我会介绍视觉差滚动和用jQuery插件Stellar.j...

Lin_R 2019-08-21 10:26 评论0 收藏0
es6学习笔记-let,const和块级作用域_v1.0_byKL

摘要：考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。函数声明语句函数表达式循环循环还有一个特别之处，就是循环语句部分是一个父作用域，而循环体内部是一个单独的子作用域。声明一个只读的常量。 es6学习笔记-let,const和块级作用域_v1.0 块级作用域 javascript 原来是没有块级作用域的,只有全局作用域和函数作用域例子1 因为没有块级作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 评论0 收藏0