That Cool Parallax Scrolling Effect - in Pure CSS3!
Join the DZone community and get the full member experience.
Join For FreeLive Demo
download result
So, lets start
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 its own image and some text description. You can add more elements to each slide. The 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.
<div class="pss_main"> <!-- main parallax scrolling slider object --> <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" /> <!-- hidden radios --> <input id="r_2" type="radio" name="p" class="sel_page_2" /> <input id="r_3" type="radio" name="p" class="sel_page_3" /> <input id="r_4" type="radio" name="p" class="sel_page_4" /> <label for="r_1" class="pss_contr c1"></label> <!-- controls --> <label for="r_2" class="pss_contr c2"></label> <label for="r_3" class="pss_contr c3"></label> <label for="r_4" class="pss_contr c4"></label> <div class="pss_slides"> <div class="pss_background"></div> <ul> <!-- slides --> <li><img src="images/image1.png" alt="image01" /> <div>Model DT 770</div> </li> <li><img src="images/image2.png" alt="image02" /> <div>Model DT 990</div> </li> <li><img src="images/image3.png" alt="image03" /> <div>Model DT 234</div> </li> <li><img src="images/image4.png" alt="image04" /> <div>Model DT 880</div> </li> </ul> </div> </div>
Step 2. CSS
Now, it’s time to define styles for our slider. These are the general styles for our main slider element, inputs and their labels:
.pss_main { height:700px; position:relative; width:100%; } .pss_main input { display:none; } .pss_contr { background:#E0371E url(../images/up.png) no-repeat center center; cursor:pointer; display:none; height:70px; left:50%; opacity:0.3; position:absolute; top:5%; width:70px; z-index:2; /* css3 transition */ -webkit-transition:opacity linear 0.3s; -moz-transition:opacity linear 0.3s; -o-transition:opacity linear 0.3s; -ms-transition:opacity linear 0.3s; transition:opacity linear 0.3s; border-radius:50% 50% 50% 50%; box-shadow:0 1px 2px #AF2C19 inset; } .pss_contr:hover { opacity:1; } .sel_page_1:checked ~ .pss_contr.c2, .sel_page_2:checked ~ .pss_contr.c3, .sel_page_3:checked ~ .pss_contr.c4 { background-image:url(../images/down.png); display:block; top:85%; } .sel_page_2:checked ~ .pss_contr.c1, .sel_page_3:checked ~ .pss_contr.c2, .sel_page_4:checked ~ .pss_contr.c3 { background-image:url(../images/up.png); display:block; }
As you can see – all the checkboxes are hidden. We needn’t show them. Instead, we will use labels. Each label is a nice red circle. It has a transition for the opacity (on hover). And, pay attention that by default, all the controls (label elements) are hidden. We will display necessary controls (buttons up and down) only according to the necessary active slide. Our next styles are for the slides (with labels) and for the background object.
.pss_slides { height:100%; overflow:hidden; position:relative; } .pss_background { background:url(../images/bg.png) no-repeat scroll 0 0; height:100%; left:0; overflow:hidden; position:absolute; top:0; width:100%; /* css3 background-size */ -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover; background-size:cover; } .pss_main input:checked ~ .pss_slides { /* css3 transition */ -webkit-transition:all linear 1.0s; -moz-transition:all linear 1.0s; -o-transition:all linear 1.0s; -ms-transition:all linear 1.0s; transition:all linear 1.0s; } .sel_page_1:checked ~ .pss_slides { background-color:#CCCCCC; } .sel_page_2:checked ~ .pss_slides { background-color:#003366; } .sel_page_3:checked ~ .pss_slides { background-color:#FFFFFF; } .sel_page_4:checked ~ .pss_slides { background-color:#CCCC99; } .pss_main input:checked ~ .pss_slides .pss_background { /* css3 transition */ -webkit-transition:all linear 1.5s; -moz-transition:all linear 1.5s; -o-transition:all linear 1.5s; -ms-transition:all linear 1.5s; transition:all linear 1.5s; } .sel_page_1:checked ~ .pss_slides .pss_background { background-position:0 0; } .sel_page_2:checked ~ .pss_slides .pss_background { background-position:0 -500px; } .sel_page_3:checked ~ .pss_slides .pss_background { background-position:0 -1000px; } .sel_page_4:checked ~ .pss_slides .pss_background { background-position:0 -1500px; } .pss_slides ul { height:100%; list-style:none; position:relative; top:0; /* css3 transition */ -webkit-transition:top ease-in 1.0s; -moz-transition:top ease-in 1.0s; -o-transition:top ease-in 1.0s; -ms-transition:top ease-in 1.0s; transition:top ease-in 1.0s; } .pss_slides ul li { height:100%; opacity:0.1; position:relative; text-align:center; /* css3 transition */ -webkit-transition:opacity ease-in 1.0s; -moz-transition:opacity ease-in 1.0s; -o-transition:opacity ease-in 1.0s; -ms-transition:opacity ease-in 1.0s; transition:opacity ease-in 1.0s; } .sel_page_1:checked ~ .pss_slides ul li:first-child, .sel_page_2:checked ~ .pss_slides ul li:nth-child(2), .sel_page_3:checked ~ .pss_slides ul li:nth-child(3), .sel_page_4:checked ~ .pss_slides ul li:nth-child(4) { opacity:1; } .pss_slides ul li img{ display:block; margin:0 auto; padding:40px; } .pss_slides ul li div{ background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:-20%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* css3 transition */ -webkit-transition:left ease-in 1.0s; -moz-transition:left ease-in 1.0s; -o-transition:left ease-in 1.0s; -ms-transition:left ease-in 1.0s; transition:left ease-in 1.0s; } .sel_page_1:checked ~ .pss_slides ul { top:0; } .sel_page_2:checked ~ .pss_slides ul { top:-100%; } .sel_page_3:checked ~ .pss_slides ul { top:-200%; } .sel_page_4:checked ~ .pss_slides ul { top:-300%; } .sel_page_1:checked ~ .pss_slides ul li:first-child div, .sel_page_2:checked ~ .pss_slides ul li:nth-child(2) div, .sel_page_3:checked ~ .pss_slides ul li:nth-child(3) div, .sel_page_4:checked ~ .pss_slides ul li:nth-child(4) div { left:10%; }
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, the background position changes too. Our slides are an unordered list. These slides have a transition for the opacity only. When we change the slide, we will change the Top position of the parent of our slides (UL object). We will also shift the position (left) of text labels. And, the last feature, we will change the background color for ‘pss_slides’ depending on the selected element (slide).
Live Demo
download result
Conclusion
That is all for today. We have just created a cool CSS3-based scrolling slider with the Parallax effect. I hope that you like it. Good luck!
Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments