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.
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 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.
01 |
< div class = "pss_main" > |
02 |
< input id = "r_1" type = "radio" name = "p" class = "sel_page_1" checked = "checked" /> |
03 |
< input id = "r_2" type = "radio" name = "p" class = "sel_page_2" /> |
04 |
< input id = "r_3" type = "radio" name = "p" class = "sel_page_3" /> |
05 |
< input id = "r_4" type = "radio" name = "p" class = "sel_page_4" /> |
06 |
< label for = "r_1" class = "pss_contr c1" ></ label > |
07 |
< label for = "r_2" class = "pss_contr c2" ></ label > |
08 |
< label for = "r_3" class = "pss_contr c3" ></ label > |
09 |
< label for = "r_4" class = "pss_contr c4" ></ label > |
10 |
< div class = "pss_slides" > |
11 |
< div class = "pss_background" ></ div > |
13 |
< li >< img src = "images/image1.png" alt = "image01" /> |
14 |
< div >Model DT 770</ div > |
16 |
< li >< img src = "images/image2.png" alt = "image02" /> |
17 |
< div >Model DT 990</ div > |
19 |
< li >< img src = "images/image3.png" alt = "image03" /> |
20 |
< div >Model DT 234</ div > |
22 |
< li >< img src = "images/image4.png" alt = "image04" /> |
23 |
< div >Model DT 880</ div > |
Step 2. CSS
Now, it’s time to define styles for our slider. This is general styles for our main slider element, inputs and their labels:
10 |
background : #E0371E url (../images/up.png) no-repeat center center ; |
21 |
-webkit-transition:opacity linear 0.3 s; |
22 |
-moz-transition:opacity linear 0.3 s; |
23 |
-o-transition:opacity linear 0.3 s; |
24 |
-ms-transition:opacity linear 0.3 s; |
25 |
transition:opacity linear 0.3 s; |
26 |
border-radius: 50% 50% 50% 50% ; |
27 |
box-shadow: 0 1px 2px #AF2C19 inset ; |
32 |
.sel_page_ 1: checked ~ .pss_contr.c 2 , .sel_page_ 2: checked ~ .pss_contr.c 3 , |
33 |
.sel_page_ 3: checked ~ .pss_contr.c 4 { |
34 |
background-image : url (../images/down.png); |
38 |
.sel_page_ 2: checked ~ .pss_contr.c 1 , .sel_page_ 3: checked ~ .pss_contr.c 2 , |
39 |
.sel_page_ 4: checked ~ .pss_contr.c 3 { |
40 |
background-image : url (../images/up.png); |
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.
007 |
background : url (../images/bg.png) no-repeat scroll 0 0 ; |
015 |
-webkit-background- size :cover; |
016 |
-moz-background- size :cover; |
017 |
-o-background- size :cover; |
018 |
-ms-background- size :cover; |
019 |
background- size :cover; |
021 |
.pss_main input:checked ~ .pss_slides { |
023 |
-webkit-transition: all linear 1.0 s; |
024 |
-moz-transition: all linear 1.0 s; |
025 |
-o-transition: all linear 1.0 s; |
026 |
-ms-transition: all linear 1.0 s; |
027 |
transition: all linear 1.0 s; |
029 |
.sel_page_ 1: checked ~ .pss_slides { |
030 |
background-color : #CCCCCC ; |
032 |
.sel_page_ 2: checked ~ .pss_slides { |
033 |
background-color : #003366 ; |
035 |
.sel_page_ 3: checked ~ .pss_slides { |
036 |
background-color : #FFFFFF ; |
038 |
.sel_page_ 4: checked ~ .pss_slides { |
039 |
background-color : #CCCC99 ; |
041 |
.pss_main input:checked ~ .pss_slides .pss_background { |
043 |
-webkit-transition: all linear 1.5 s; |
044 |
-moz-transition: all linear 1.5 s; |
045 |
-o-transition: all linear 1.5 s; |
046 |
-ms-transition: all linear 1.5 s; |
047 |
transition: all linear 1.5 s; |
049 |
.sel_page_ 1: checked ~ .pss_slides .pss_background { |
050 |
background-position : 0 0 ; |
052 |
.sel_page_ 2: checked ~ .pss_slides .pss_background { |
053 |
background-position : 0 -500px ; |
055 |
.sel_page_ 3: checked ~ .pss_slides .pss_background { |
056 |
background-position : 0 -1000px ; |
058 |
.sel_page_ 4: checked ~ .pss_slides .pss_background { |
059 |
background-position : 0 -1500px ; |
067 |
-webkit-transition: top ease-in 1.0 s; |
068 |
-moz-transition: top ease-in 1.0 s; |
069 |
-o-transition: top ease-in 1.0 s; |
070 |
-ms-transition: top ease-in 1.0 s; |
071 |
transition: top ease-in 1.0 s; |
079 |
-webkit-transition:opacity ease-in 1.0 s; |
080 |
-moz-transition:opacity ease-in 1.0 s; |
081 |
-o-transition:opacity ease-in 1.0 s; |
082 |
-ms-transition:opacity ease-in 1.0 s; |
083 |
transition:opacity ease-in 1.0 s; |
085 |
.sel_page_ 1: checked ~ .pss_slides ul li:first-child, |
086 |
.sel_page_ 2: checked ~ .pss_slides ul li:nth-child( 2 ), |
087 |
.sel_page_ 3: checked ~ .pss_slides ul li:nth-child( 3 ), |
088 |
.sel_page_ 4: checked ~ .pss_slides ul li:nth-child( 4 ) { |
091 |
.pss_slides ul li img{ |
096 |
.pss_slides ul li div{ |
097 |
background-color : #000000 ; |
098 |
border-radius: 10px 10px 10px 10px ; |
099 |
box-shadow: 0 0 5px #FFFFFF inset ; |
109 |
-webkit-transition: left ease-in 1.0 s; |
110 |
-moz-transition: left ease-in 1.0 s; |
111 |
-o-transition: left ease-in 1.0 s; |
112 |
-ms-transition: left ease-in 1.0 s; |
113 |
transition: left ease-in 1.0 s; |
115 |
.sel_page_ 1: checked ~ .pss_slides ul { |
118 |
.sel_page_ 2: checked ~ .pss_slides ul { |
121 |
.sel_page_ 3: checked ~ .pss_slides ul { |
124 |
.sel_page_ 4: checked ~ .pss_slides ul { |
127 |
.sel_page_ 1: checked ~ .pss_slides ul li:first-child div, |
128 |
.sel_page_ 2: checked ~ .pss_slides ul li:nth-child( 2 ) div, |
129 |
.sel_page_ 3: checked ~ .pss_slides ul li:nth-child( 3 ) div, |
130 |
.sel_page_ 4: checked ~ .pss_slides ul li:nth-child( 4 ) div { |
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).
Conclusion
That is all for today. We have just created cool CSS3-based scrolling slider with Parallax effect. I hope that you like it. Good luck!