Multiple sliding backgrounds with CSS.

I recently made a new landing page for a windsurfing fitness program I sell as an e-book. To make a much more simple and a little bit cooler looking image slider I decided to just use 3 images as backgrounds and scroll them in different directions at different speeds.

The end result makes it look like a big multiple image slider but it's not.

#slide1, #slide2, #slide3 { height: 240px; width: 29549px!important; overflow: hidden; margin: 10px 0px!important; }

#slide1 { animation: slide1 130s linear infinite; }
#slide2 { animation: slide2 110s linear infinite; }
#slide3 { animation: slide3 60s linear infinite; }

The images are just setup as backgrounds to the 3 divs. Then we use some keyframes to control the animations.

@keyframes slide1 { 0%{ transform: translate3d(0px, 0, 0); } 100%{ transform: translate3d(-3000px, 0, 0); } }
@keyframes slide2 { 0%{ transform: translate3d(-25000px, 0, 0); } 100%{ transform: translate3d(-22000px, 0, 0); } }
@keyframes slide3 { 0%{ transform: translate3d(0px, 0, 0); } 100%{ transform: translate3d(-3000px, 0, 0); } }

I made the width of the divs insanely long so if you watch the slides for a long time they don't eventually run off the page.

Working on other pages on the site now here, here, here, here, here. Hope you like!