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