css scroll parallax

Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle.

You gonna love this one for it’s simple HTML, elegant CSS and lack of any JavaScript. Here’s how the CSS3-only parallax scroll effect was built:

The Slides:

Each slide is a <section /> element with display: table. This allows 100% width and height relative to the viewport. Of course you may also use any other height and the slides will automatically auto-adjust:

body > section
{
    position: relative;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    font-family: "Open Sans", Helvetica, Arial, Sans-serif;
    text-shadow: 1px 1px 0 #000;
}

The rest is as easy as:

Nested <div /> Elements…

… Which have been set as display table-cell. They also hold the content of each slide and you can apply any style to them.

The Actual Parallax Effect…

… Has been achieved by setting a background image as <section />‘s generated content by using the before:: pseudo-element. I decided to use generated content instead of a simple background image, because in this manner I am also able to apply CSS/SVG filter effects without affecting the content of the slide:

body > section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body > section:nth-child(2)::before
{
    background-image: url("images/green.jpg"); /* slide with a background image */
}

body > section:nth-child(3)::before
{
    background: #b01e00; /* slide with a solid color background */
}

I must admit I am not a huge fan of parallax effects, but I admire the well crafted ones, and there are stunning examples on the Internet. Yet I had real fun trying to achieve a similar effect with CSS only. Still in the thing called HTML5 Web Components, I am planning to create a more sophisticated (with quick navigation, configuration options and animations) custom tag out of this soon, so check back in a few days!

Check the demo on this page. You will also find a download link there. Make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

UPDATE (September 27, 2014): I just released a similar parallax UI, but wrapped as a custom HTML5 Web Component, maybe you will be interested to check it out.

Advertisements