[英]Creating a parallax-like effect using an image that isn't the background
I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options. 我正在尝试创建一种滚动效果,最好不要使用javascript(仅CSS),但是我知道是否不可能,只是探索各种选项。
My page looks like this: 我的页面如下所示:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it. 向下滚动时,我希望背景图像具有类似于视差的效果,并在人体的背景和框架围绕其移动时保持静止。
Here's a sample of code to work with: 以下是可使用的代码示例:
http://jsfiddle.net/J8fFa/7/ http://jsfiddle.net/J8fFa/7/
HTML 的HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS 的CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect? 如果图像是人体的背景,我可以看到它如何工作,但是由于它位于人体的顶部,有什么方法可以操纵它以产生类似的视觉效果?
change your .image-bg class to: 将您的.image-bg类更改为:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling 这样可以防止图像滚动
updated fiddle: http://jsfiddle.net/J8fFa/9/ 更新的小提琴: http : //jsfiddle.net/J8fFa/9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.