THE CARTWHEEL PROJECT PARALLAX EXAMPLE

THE CARTWHEEL PROJECT



The div images are stacked behind each other positioned at the top with the position attribute set to fixed creating a background look. During scrolling, the current (background) image is determined and the new position for that image is calculated and set, moving the (background) image upwards/downwards at a slower speed than the foreground elements.
Try scrolling up/down, reloading and resizing the page. The foreground image sizes are recalculated to fit in relationship to the current screen size.

All should also work on mobiles and tablets. (android and IOS)

THE CARTWHEEL PROJECT 1A

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 2

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 2A

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 3

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 3A

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 4

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 4A

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 5

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 5A

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 6

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT 6A

THE CARTWHEEL PROJECT




THE CARTWHEEL PROJECT


THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT

THE CARTWHEEL PROJECT END