图像视差滚动不光滑

Question

我想创建一个非常简单的视差滚动效果只是jQuery，CSS和图像，但问题是，它不是非常光滑，非常生涩。

我的目标是让用户向下滚动页面时，图像从页面右上角移动到左下角。

我需要一些帮助实现和更多的抛光页面，但要么修复我现有的js，要么你知道如何实现一个更好的视差插件。

如果需要，我可以发送所有必需的文件。

这里是我当前的代码：

的Javascript：

$(document).scroll(function() { 
var ratio = window.pageYOffset/($(document).height() - $(window).height()) ; 
console.log("scroll: " + window.pageYOffset + ", ratio: " + ratio); 

$('#slash-1').css('top', -160 + (4500 * ratio) + 'px'); 
$('#slash-1').css('left', 960 - (960 * (ratio)) + 'px'); 

$('#slash-2').css('top', -300 + (4500 * ratio) + 'px'); 
$('#slash-2').css('left', 960 - (960 * (ratio)) + 'px'); 
}); 

HTML

<div id="slash-1"><img src="img/slash.png"></div> 

CSS

#slash-1 { position: absolute; top: 300px; left: 960px; } 

Answer 1

我发现了一个解决方案，它通过使用这个固定的问题javasc ript

$(window).scroll(function() { 
var distance = $(this).scrollTop(); 
$('#slash-1').css({ 
    'top': (distance*2) + 'px', 
    'right': '+' + distance + 'px' 
}); 
});