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.

Live 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 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"<!-- main parallax scrolling slider object -->
02     <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" /> <!-- hidden radios -->
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<!-- controls -->
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>
12         <ul<!-- slides -->
13             <li><img src="images/image1.png" alt="image01" />
14                 <div>Model DT 770</div>
15             </li>
16             <li><img src="images/image2.png" alt="image02" />
17                 <div>Model DT 990</div>
18             </li>
19             <li><img src="images/image3.png" alt="image03" />
20                 <div>Model DT 234</div>
21             </li>
22             <li><img src="images/image4.png" alt="image04" />
23                 <div>Model DT 880</div>
24             </li>
25         </ul>
26     </div>
27 </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:

01 .pss_main {
02     height:700px;
03     position:relative;
04     width:100%;
05 }
06 .pss_main input {
07     display:none;
08 }
09 .pss_contr {
10     background:#E0371E url(../images/up.png) no-repeat center center;
11     cursor:pointer;
12     display:none;
13     height:70px;
14     left:50%;
15     opacity:0.3;
16     position:absolute;
17     top:5%;
18     width:70px;
19     z-index:2;
20     /* css3 transition */
21     -webkit-transition:opacity linear 0.3s;
22     -moz-transition:opacity linear 0.3s;
23     -o-transition:opacity linear 0.3s;
24     -ms-transition:opacity linear 0.3s;
25     transition:opacity linear 0.3s;
26     border-radius:50% 50% 50% 50%;
27     box-shadow:0 1px 2px #AF2C19 inset;
28 }
29 .pss_contr:hover {
30     opacity:1;
31 }
32 .sel_page_1:checked ~ .pss_contr.c2, .sel_page_2:checked ~ .pss_contr.c3,
33 .sel_page_3:checked ~ .pss_contr.c4 {
34     background-image:url(../images/down.png);
35     display:block;
36     top:85%;
37 }
38 .sel_page_2:checked ~ .pss_contr.c1, .sel_page_3:checked ~ .pss_contr.c2,
39 .sel_page_4:checked ~ .pss_contr.c3  {
40     background-image:url(../images/up.png);
41     display:block;
42 }

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.

001 .pss_slides {
002     height:100%;
003     overflow:hidden;
004     position:relative;
005 }
006 .pss_background {
007     background:url(../images/bg.png) no-repeat scroll 0 0;
008     height:100%;
009     left:0;
010     overflow:hidden;
011     position:absolute;
012     top:0;
013     width:100%;
014     /* css3 background-size */
015     -webkit-background-size:cover;
016     -moz-background-size:cover;
017     -o-background-size:cover;
018     -ms-background-size:cover;
019     background-size:cover;
020 }
021 .pss_main input:checked ~ .pss_slides {
022     /* css3 transition */
023     -webkit-transition:all linear 1.0s;
024     -moz-transition:all linear 1.0s;
025     -o-transition:all linear 1.0s;
026     -ms-transition:all linear 1.0s;
027     transition:all linear 1.0s;
028 }
029 .sel_page_1:checked ~ .pss_slides {
030     background-color:#CCCCCC;
031 }
032 .sel_page_2:checked ~ .pss_slides {
033     background-color:#003366;
034 }
035 .sel_page_3:checked ~ .pss_slides {
036     background-color:#FFFFFF;
037 }
038 .sel_page_4:checked ~ .pss_slides {
039     background-color:#CCCC99;
040 }
041 .pss_main input:checked ~ .pss_slides .pss_background {
042     /* css3 transition */
043     -webkit-transition:all linear 1.5s;
044     -moz-transition:all linear 1.5s;
045     -o-transition:all linear 1.5s;
046     -ms-transition:all linear 1.5s;
047     transition:all linear 1.5s;
048 }
049 .sel_page_1:checked ~ .pss_slides .pss_background {
050     background-position:0 0;
051 }
052 .sel_page_2:checked ~ .pss_slides .pss_background {
053     background-position:0 -500px;
054 }
055 .sel_page_3:checked ~ .pss_slides .pss_background {
056     background-position:0 -1000px;
057 }
058 .sel_page_4:checked ~ .pss_slides .pss_background {
059     background-position:0 -1500px;
060 }
061 .pss_slides ul {
062     height:100%;
063     list-style:none;
064     position:relative;
065     top:0;
066     /* css3 transition */
067     -webkit-transition:top ease-in 1.0s;
068     -moz-transition:top ease-in 1.0s;
069     -o-transition:top ease-in 1.0s;
070     -ms-transition:top ease-in 1.0s;
071     transition:top ease-in 1.0s;
072 }
073 .pss_slides ul  li {
074     height:100%;
075     opacity:0.1;
076     position:relative;
077     text-align:center;
078     /* css3 transition */
079     -webkit-transition:opacity ease-in 1.0s;
080     -moz-transition:opacity ease-in 1.0s;
081     -o-transition:opacity ease-in 1.0s;
082     -ms-transition:opacity ease-in 1.0s;
083     transition:opacity ease-in 1.0s;
084 }
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) {
089     opacity:1;
090 }
091 .pss_slides ul li img{
092     display:block;
093     margin:0 auto;
094     padding:40px;
095 }
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;
100     color:#FFFFFF;
101     font-size:26px;
102     left:-20%;
103     margin:0 auto;
104     padding:20px;
105     position:absolute;
106     top:50%;
107     width:200px;
108     /* css3 transition */
109     -webkit-transition:left ease-in 1.0s;
110     -moz-transition:left ease-in 1.0s;
111     -o-transition:left ease-in 1.0s;
112     -ms-transition:left ease-in 1.0s;
113     transition:left ease-in 1.0s;
114 }
115 .sel_page_1:checked ~ .pss_slides ul {
116     top:0;
117 }
118 .sel_page_2:checked ~ .pss_slides ul {
119     top:-100%;
120 }
121 .sel_page_3:checked ~ .pss_slides ul {
122     top:-200%;
123 }
124 .sel_page_4:checked ~ .pss_slides ul {
125     top:-300%;
126 }
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 {
131     left:10%;
132 }

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).


Live Demo

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!