body > section
font-family: "Open Sans", Helvetica, Arial, Sans-serif;
text-shadow: 1px 1px 0 #000;
The rest is as easy as:
<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
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!
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.
© 2006 - 2018 Martin Ivanov