CSS3 Parallax scrolling slider

Haven’t you noticed that there have been appeared a lot of websites with the effect of parallax effect? This is optical effect (displacement or difference in the apparent position of an object viewed along two different lines of sight). Basically, this is when we can see several shifting layers during some action. And today, we will apply this effect for vertical slider. We won’t use javascript, but only pure css3 properties.

Step 1. HTML

Look at our html markup. There are four radio elements, four labels for them (as controllers), and four slides (or pages). Each slide has own image, some text description. You can add here more elements to each slide. Main idea – hide the radio buttons, and use these labels in order to set ‘checked’ status for the radio elements. And, apply different css properties according to current checked radio element.

As you can see – all the checkbox are hidden. We needn’t show them. Instead, we will use labels. Each label is nice red circle. It has a transition for the opacity (on hover). And, pay attention that by default, all the controls (label elements) is hidden. We will display necessary controls (buttons up and down) only according to necessary active slide. Our next styles are for the slides (with labels) and for background object.

So, we can see here our main background with absolute position (pss_background element). It has a transition for the background-position property. So, when we change the slide, background position changes too. Our slides are unordered list. These slides have transition for the opacity only. When we change the slide, we will change Top position of the parent of our slides (UL object). We will also shift position (left) of text labels. And, the last feature, we will change background color for ‘pss_slides’ depending on the selected element (slide).

Hi, I just tried to experiment with this prallax scrolling slider and I added some pages. I now have 7 pages which I use to show a restaurant menu. But the problem is that when I slide into the 4th page the label doesn’t appear and the image that I used to display isn’t clear… Meaning it has a low percentage of opacity… Can you please explain how come??

Hi Taco, I think that you should take into account, that all the slides and css styles are related, it means, if you added few more slides, you will need to add more radio elements and labels, plus you also need to add necessary styles for your new elements (just pay attention how we used the fourth element)

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more