Searching for parallax pure css and clicking on the first result from CodePen (the second result is the current page :), a nice example is displayed with both fixed and scrolling backgrounds. For the record, I place the source code here, providing support for Chrome, Safari and Opera, too.
The example appears to have two kinds of backgrounds:
- fixed, with
background-attachment: fixed in the desired element, like #slide2
- scrolling, with
transform: translateZ(-1px) scale(2) before the desired element, like #slide1
Moreover, the scrolling effect seems to depend on the setting transform-style: preserve-3d of body to work properly. (IE doesn't happen to support transform-style, by the way.)
Finally, different scrolling speeds can be achieved by tweaking transform property, like the two img elements of the example.
Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title> Pure CSS Parallax Scrolling </title>
<!-- Copyright (c) 2014 by Keith Clark -->
<style>
@import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4 {
background: #222;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Pure CSS Parallax</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
</body>
