Submit your widget

Pure CSS3 Parallax scrolling slider effect

Created 4 years ago   Views 27740   downloads 4135    Author script-tutorials
Pure CSS3  Parallax scrolling slider effect
View DemoDownload 742.9 KB
Share |

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.

<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><img src="images/image2.png" alt="image02" />
                <div>Model DT 990</div>
            <li><img src="images/image3.png" alt="image03" />
                <div>Model DT 234</div>
            <li><img src="images/image4.png" alt="image04" />
                <div>Model DT 880</div>
Read more: