Question

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

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

希望这很清楚，

感谢任何帮助

乔恩

Answer 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%;
}

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

视差滚动效果，从页面上的特定百分比开始？

1 个答案: