Parallax Effect with Pure CSS3
Demo
Page scroll parallax effect, achieved with pure CSS, without a single line of JavaScript. Click here to open the demo in a new tab. Note that as of September 2014, Internet Explorer still does not fully support CSS 3D transforms, so for that browser the effect is impaired (but the layout is okay).
On Chrome, due to a longtime un-addressed issue, the effect will not be applied on mouse wheel scroll, but if you drag the scrollbar it will kick in. Fortunately, there a lot of JavaScript solutions for smooth scrolling.
Interested in HTML Web Components? Check the same parallax experiment, ready to use as a killer custom tag.
Usage and Code Insight
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>CSS3 Parallax by Martin Ivanov (@wemakesitesnet)</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" />
<link rel="stylesheet" href="AcidJs.Parallax/styles/Parallax.css" />
</head>
<body>
<section>
<div style="background-image: url('AcidJs.Parallax/styles/images/dark.jpg');"><!-- / --></div>
<div>
<h1>CSS3 Parallax by Martin Ivanov (@wemakesitesnet). No JavaScript. No Hassle.</h1>
<p>You gonna love this one for it's simple HTML, elegant CSS and
lack of any JavaScript. Scroll the page down to see how it's done.
And it's responsive too!
Download <a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=274">here</a>
and play with the code! Note that as of September 2014, Internet
Explorer still does not fully support CSS 3D transforms, so for
that browser the effect is impaired (but the layout is okay).</p>
<p>On Chrome, due to a longtime un-addressed issue, the effect will
not be applied on mouse wheel scroll, but if you drag the scrollbar
it will kick in. Fortunately, there a lot of JavaScript
<a href="http://bassta.bg/demos/smooth-page-scroll/" target="_blank">solutions</a>
for smooth <a href="https://github.com/im4aLL/chromeSmoothScroll" target="_blank">scrolling</a>.</p>
</div>
</section>
<section style="background-image: url('AcidJs.Parallax/styles/images/green.jpg');">
<div><!-- / --></div>
<div>
<h2>CSS3 Rule #1</h2>
<p>Start coding your beautiful CSS with the assumption that you might not need any JavaScript at all. And you won't!</p>
</div>
</section>
<section>
<div style="background-image: url('AcidJs.Parallax/styles/images/sky.jpg');"><!-- / --></div>
<div>
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>
</div>
</section>
<section style="background-image: url('AcidJs.Parallax/styles/images/autumn.jpg');">
<div><!-- / --></div>
<div>
<h2>Dolor Sit</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>
</div>
</section>
<section>
<div style="background-image: url('AcidJs.Parallax/styles/images/broken.jpg');"><!-- / --></div>
<div>
<h2>And That's It!</h2>
<p>The rest is up to your imagination and colorful dreams. You can have as many slides and colors as you wish!</p>
<p>If you like this solution, you can also check my
<a href="http://wemakesites.net/" target="_blank">personal wesbite</a>,
<a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>,
<a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>,
<a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a>
or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
</div>
</section>
</body>
</html>
/*
* CSS3 Parallax by Martin Ivanov (@wemakesitesnet)
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
/*
* Do you like this solution? Please, donate:
* https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
**/
*,
*::before,
*::after
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
body > section
{
height: 100%;
}
*
{
margin: 0;
padding: 0;
font-weight: 400;
}
a,
body > section
{
color: #fff;
}
html
{
overflow: hidden;
}
body
{
overflow: hidden;
overflow-y: auto;
font-family: "Open Sans", Helvetica, Sans-serif;
background: #2e3436;
cursor: default;
-webkit-perspective: 1px;
-moz-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body > section,
body > section > div:nth-child(2)
{
width: 100%;
}
body > section
{
position: relative;
display: block;
height: 100%;
-webkit-transform-style: inherit;
-moz-transform-style: inherit;
transform-style: inherit;
}
body > section > div:first-child
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
}
body > section,
body > section > div:first-child
{
background-position: 50% 50%;
background-size: cover;
}
body > section:nth-child(odd) > div:first-child
{
z-index: -1;
-webkit-transform: translateZ(-1px) scale(2);
-moz-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
body > section:nth-child(even)
{
background-attachment: fixed;
}
body > section > div:nth-child(2)
{
display: table-cell;
height: 100vh;
width: 100vw;
padding: 5%;
text-align: center;
font-size: 1.5em;
vertical-align: middle;
}