视差滚动效果，在页面上以一定的百分比开始

Parallax scrolling effect, start at certain percentage on page?

本文关键字：开始 百分比 滚动 视差      更新时间：2023-09-26

我正在使用这个脚本在我的页面上创建视差滚动效果：

$(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

希望这是清楚的，

感谢提供的任何帮助

Jon

好的，我想我已经解决了这个问题。

$(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%;
}

修正了跳跃。希望这能有所帮助。

相关文章：