3

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; }
4

1 に答える 1

2

このJavaScriptを使用して問題を解決する解決策を見つけました

$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
    'top': (distance*2) + 'px',
    'right': '+' + distance + 'px'
});
});
于 2012-12-16T13:52:47.900 に答える