0

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

$(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具有不同的背景图像，不透明度和'top''left'）：

.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？

这是问题的codepen：http ://codepen.io/anon/pen/tkfDH

希望这很清楚，

任何帮助表示赞赏

乔恩

4

1 回答 1

1

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

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

修正了跳跃。希望这可以帮助。

于 2013-09-01T13:12:14.353 回答