圖像視差滾動不光滑

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' 
}); 
});