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

最新推荐文章于 2023-05-10 13:58:45 发布

--Rescue--

最新推荐文章于 2023-05-10 13:58:45 发布

阅读量364

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

视差滚动（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里的。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>滚动视觉差示例</title>
<style>
*{ padding:0;margin:0}
body{text-align:center;background-attachment:fixed;}
#main{width: 1920px;margin:auto}
.bg-attachment1{background:url(img/3banner.png) center center no-repeat;
/*box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;*/
background-attachment:fixed;}
.shadow{width:100%;height:400px;overflow:hidden;margin:auto;background-color: #000000;opacity: 0.6;}
.bg-attachment2{background:url(img/1banner.png) center center no-repeat;background-attachment:fixed;}
</style>
</head>
<body>
<div id="main">

 

<div class="bg-attachment1">
<div class="shadow"></div>
</div>

 
 

<div class="bg-attachment2">
<div class="shadow"></div>
</div>
 
</div>
</body>
</html>