[英]Image Parallax Scrolling Not Smooth
我試圖創建一個非常簡單的視差滾動效果只是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; }
我找到了一個解決方案,通過使用此JavaScript來解決問題
$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
'top': (distance*2) + 'px',
'right': '+' + distance + 'px'
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.