练习视差滚动例子_byKL

最新推荐文章于 2024-08-12 09:24:46 发布

weixin_33795833

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008746747

版权

练习视差滚动例子

介绍一下视差

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

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

参考引用:

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

weixin_33795833

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习视差滚动例子_byKL

练习视差滚动例子介绍一下视差指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉,例如js的鼠标坐标移动实...
复制链接

扫一扫