Question

I’m experiencing a weird issue here. I have a Javascript code which scrolls my page diagonally. It takes the scrollTop() value and divides it to scroll diagonally. But when i try to scroll it with two “layers”, the foreground scrolling more than the background layer, i experience a sluggish animation when i finish scrolling to bottom and try to scroll to top again.

I have tried somethings as i saw here, like caching vars, declaring in e.g. $(window) as $window with no luck. I dont know if this issue its happening by the Math or Animate.

Here’s my jsfiddle: http://jsfiddle.net/sPB3a/

You can experience it in fullscreen here: http://jsfiddle.net/sPB3a/show/

Thanks for any tip!

Answer 1

I think that the root cause of the problem is the size of the background images. I removed all background images from your page and i get a perfectly smooth scrolling.

They are really heavy. You should try with very low quality jpg images (less that 20k). If this works, you have then to work on the images to find the good compromise.

Note: png format is a looseless image format. It’s good for small images and screenshots (where large areas have exactly the same color). It’s not good when there are a lot of very similar colors, blurs and gradients. e.g. photos. In your case, you should use jpg format and ajust the quality level.