网页前景、背景滚动不一致的效果实现
2016-06-19 本文已影响554人
yimi珊
前言
网页前景和背景，滚动不一致的效果应该怎么实现呢？
之前朋友推荐了这个网站给我 Snow Marvel，里面的前景跟背景滚动，是不一致的，很有趣。于是我就开始思考我应该怎么来制作这种效果呢！
想了想，我觉得可以利用 position:fixed; ，还有 margin-top来实现效果。
好了，废话不多说，我们先来把页面給建立起来吧！
实现代码
<!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
