Fluid CSS3 Slideshow with Parallax Effect

Make a slideshow with a parallax effect using CSS3

In this tutorial, Ring Wing is going to create a slideshow with a parallax effect with the help of some CSS3 properties. He will use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.

 

Ring Wing will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. For that he will leave the inputs on the same level like the sp-content div. When we click on an input it will change the background color and background position of it (grid pattern) and also the background-position of the sp-parallax-bg div (the world map) with transitions.

Comments

Be the first to write a comment

You must me logged in to write a comment.