视差滚动效果，从页面上的一定百分比开始吗？
视差滚动效果，从页面上的一定百分比开始吗？
提问于 2013-09-01 10:01:10
我使用这个脚本在我的页面上创建一个视差滚动效果：
$(window).scroll(function (e) {
parallax();
});
function parallax() {
var scrolled = $(window).scrollTop();
$('.cloud1').css('top', - (scrolled * 0.1) + '%');
$('.cloud2').css('top', - (scrolled * 0.3) + '%');
$('.cloud3').css('top', - (scrolled * 0.2) + '%');
}HTML:
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>CSS ( .cloud2和.cloud3相同，但具有不同的背景图像、不透明度和“顶部”“左”)：
.cloud1 {
background: url(../images/cloud1.png) no-repeat;
opacity: 0.9;
position: fixed;
width: 100%;
height: 100%;
top: 50%;
left: 20%;
z-index: 1;
}当脚本开始(滚动)时，HTML将更改为：
<div class="cloud1" style="top: 0%; "></div>这使得“云”跳到页面的顶部，然后视差开始(您可以在很短的时间内看到它，因为它已经跳到了页面的顶部)
是否有一种方法将style="top: 0%;"设置为20%开始，当视差开始，然后开始乘以0.1？
下面是问题的代码：http://codepen.io/anon/pen/tkfDH
希望这是清楚的，
任何帮助都是非常感谢的。
琼恩
Stack Overflow用户
回答已采纳
发布于 2013-09-01 13:12:14
好吧，我想我已经解决了问题。
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.cloud1').css('top', -(scrolled*0.1)+70+'%');
// the 70 corresponds to the 'cloud1' value for 'top'.
$('.cloud2').css('top', -(scrolled*0.3)+50+'%');
// the 50 corresponds to the 'cloud2' value for 'top'.
}http://cdpn.io/naIjf
#hero {
background:black;
color: white;
}
.cloud1, .cloud2 {
opacity: 0.8;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
.cloud1 {
background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 70%;
left: 0;
}
.cloud2 {
background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 50%;
left: 65%;
}修正了跳伞。希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18557291
复制相关文章
相似问题
腾讯云开发者
