前景和背景滚动不一致效果

发表于   |   分类于   |  

前言

网页前景和背景，滚动不一致的效果应该怎么实现呢？

之前朋友推荐了这个网站给我 Snow Marvel，里面的前景跟背景滚动，是不一致的，很有趣。于是我就开始思考我应该怎么来制作这种效果呢！

想了想，我觉得可以利用 position:fixed; ，还有 margin-top来实现效果。

好了，废话不多说，我们先来把页面給建立起来吧！

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
        *{
            margin:0;
            padding:0;
        }
        #down_page{
            /*此处设置定位和z-index是为了后面使用margin-top改变位置*/
            position:fixed;
            z-index: -1;
            top: 0;
            left: 0;
        }
        #down_page img{
            height: 720px;
            float: left;
        }
        #top_page{
            padding-top: 600px;
        }
        #top_page div{
            width: 100%;
            height: 300px;
            color:white;
            font-size: 50px;
            text-align: center;
            padding-top: 200px;
        }
        .content1{
            background-color: #3ee;
            margin-bottom: 600px;
        }
        .content2{
            background-color: #e9c;
            margin-bottom: 600px;
        }
        .content3{
            background-color: #e66;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- 这里是后面的图片层 -->
        <div id="down_page">
            <!-- 放置你所需的图片 -->           
            <img src="img/down_bg2.jpg" >
            <img src="img/down_bg1.jpg" >
            <img src="img/down_bg2.jpg" >
        </div>
        <!-- 上面内容层 -->
        <div id="top_page">
            <div class="content1">content 1</div>       
            <div class="content2">content 2</div>       
            <div class="content3">content 3</div>       
        </div>      
    </div>  
    <script>    
        //获取元素
        var oDownPage = document.getElementById('down_page');
        var oTopPage = document.getElementById('top_page');
        //当浏览器滚动时
        document.onscroll = function(){
            //浏览器滚动的距离
            var scroll_top = document.body.scrollTop;
            //计算背景高度与前景高度的比例
            var num = oDownPage.offsetHeight / oTopPage.offsetHeight;
            //设置背景层滚动的速度
            oDownPage.style.marginTop = -scroll_top * num + 'px';
        }
    </script>
</body>
</html>

在线效果预览

这里我并没有实现响应式，如有需要的话请自己添加。

代码实现的还有不足之处，还要继续加油！

By : Yimi-shan