CODEWITHSUNDEEP
javascriptjqueryhtmlcssparallax
anandpatel
anandpatel

Reputation: 51

Image Parallax Scrolling Not Smooth

I am trying to create a very simple parallax scrolling effect just jQuery, CSS and an image but the problem is that it is not very smooth and very jerky.

My object is to have a image move from the top right of the page to the bottom left as the user scrolls down the page.

I need some help in achieving and more polished page, but either fixing my existing js or if you know how to implement a parallax plugin thats even better.

I am able to send over all the required files if nessessary.

Here is my current code:

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

Upvotes: 3

Views: 2393

Answers (1)

anandpatel
anandpatel

Reputation: 51

I found a solution which fixed the problem by using this javascript

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

Upvotes: 2

Related Questions