Smooth Parallax Scrolling | kirupa.com


#1

by kirupa | 1 July 2013

For many practical reasons, our UIs are designed to be two dimensional. Once you throw in meaningful content, some navigation, and other doo-dads to make your application usable, adding any more dimensions simply gets in the way and becomes a distraction. Despite the stranglehold two dimensions have on what we create, there are subtle and effective ways of sneaking an extra dimension in here and there.


This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/smooth_parallax_scrolling.htm

#2

Kirupa,

I’m a little new to javascript and parallax. You’re currently making the elements move by id. How would I go about applying the effect to an id’s property? Specifically the background-image?

#viewport {background-image: }


#3

Hi Shane!
While you can use JavaScript to change the values of background-image property on your viewport element, it’s not very performant. The better approach would be to create another div element that will host the background image. You can then animate this element around using the same tips outlined in the tutorial. It would be similar to how the bigYellowSquare element is behind everything and moves.

Cheers,
Kirupa


#4

Hey Kirupa,

I was wondering if it would be possible for me to hire you to get parallax working on my site? I’ve tried several times but it just isn’t working right.

I tried doing it on my own, but this is just giving me a headache… It’s a 7 layer silhouette of a city just above the footer and I need it to move only when it is inside the viewport. Any chance you could help me out?

I can paypal you and email you admin login credentials…

Thanks in advance

Shane