我正在尝试使用jQuery、CSS和一张图片创建一个非常简单的视差滚动效果,但问题是它不太流畅,非常卡顿。
我的目标是将一张图片从页面的右上角移动到左下角,当用户向下滚动页面时。
我需要一些帮助来实现更加完美的页面,要么修复现有的js,要么如果您知道如何实现视差插件就更好了。
如果需要,我可以发送所有所需的文件。
以下是我的当前代码:
Javascript:
我的目标是将一张图片从页面的右上角移动到左下角,当用户向下滚动页面时。
我需要一些帮助来实现更加完美的页面,要么修复现有的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; }