- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Image 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
`
`
CSS
`#slash-1 {
position: absolute;
top: 300px;
left: 960px;
}`
You should use `$(window)`. To get the scroll distance, just use `$(window).scrollTop()`:
$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
'top': (distance*2) + 'px',
'left': '-' + distance + 'px'
});
});
See the demo here ⇒ http://jsfiddle.net/tovic/43eG7/58/
I think you can develop the rest themselves :)