DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. Languages
  4. That Cool Parallax Scrolling Effect - in Pure CSS3!

That Cool Parallax Scrolling Effect - in Pure CSS3!

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
May. 25, 12 · Interview
Like (0)
Save
Tweet
Share
56.20K Views

Join the DZone community and get the full member experience.

Join For Free
Haven’t you noticed that there have been appeared a lot of websites with the parallax effect? This is the 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 to a 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 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!

CSS Parallax scrolling

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Important Data Structures and Algorithms for Data Engineers
  • The Beauty of Java Optional and Either
  • Microservices 101: Transactional Outbox and Inbox
  • DevOps for Developers — Introduction and Version Control

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: