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

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:

[css]
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;
}
[/css]

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:

[css]
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 */
}
[/css]

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.