利用background-attachment做视差滚动效果

时间:2021-07-10 09:14:44

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。

不明白的可以先看看eBay上的效果:http://www.ebay.com/new/

其实就是固定背景不让它随着滚动轴移动,但包含背景的容器是跟着滚动的,所造成的视觉差异看起来就像跟转换场景一样。(这个解释别嫌混乱…)

在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment -- 定义背景图片随滚动轴的移动方式

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

附带w3c的链接:http://www.w3school.com.cn/css/pr_background-attachment.asp

浏览器的支持性:

测试了chrome,opera,safari,firefox,ie7-8都是可以的,所以就是说IE6下不行~

在IE6下使用这个属性,需要把background-attachment:fixed放置于body或html当中,就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

这是我自己做的一个demo,点击可以下载

代码:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动视觉差示例</title>
<style>
*{
padding:;
margin:
}
body{
text-align:center;
background-attachment:fixed;
}
#main{
width: 1280px;
margin:auto
}
.header{
background:#fff;
padding: 10px
}
.bg-attachment{
background:url(.jpg) center center no-repeat;
box-shadow: 7px 18px # inset, -7px 18px # inset;
-webkit-box-shadow: 7px 18px # inset, -7px 18px # inset;
-moz-box-shadow: 7px 18px # inset, -7px 18px # inset;
-o-box-shadow: 7px 18px # inset, -7px 18px # inset;
-ms-box-shadow: 7px 18px # inset, -7px 18px # inset;
background-attachment:fixed;
}
.bg-attachment .shadow{
width:%;
height:700px;
overflow:hidden;
margin:auto;
}
.div2{
background:url(qingz.jpg) center center no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<img src="5.jpg">
</div>
<div class="bg-attachment">
<div class="shadow"></div>
</div>
<div class="header">
<img src="qi.jpg">
</div>
<div class="bg-attachment div2">
<div class="shadow"></div>
</div>
</div>
</body>
</html>

相关文章