Tag Archives: parallax

Collaboration with Webucator

A couple of weeks ago I was contacted by Webucator asking me if I’d be interested in the creation of a video tutorial with my Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle blog post and experiment. Of course, I was much excited by the idea, especially when I was told that it will be directed and narrated by Chris Minnick from WatzThis – a published author of several amazing books on web development.

The video is available on YouTube already. Enjoy, have a great weekend and make sure you pay a visit to my new friends at Webucator if you are looking for professional online and onsite instructor-led training classes in web- and software development.

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 much of a 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.