Parallax scrolling with CSS only?
Solution 1
I really like KitKat’s answer, but as Roy Prins suggested, it would be very helpful to reduce it down to the bare essentials, to see precisely what is sufficient to create this effect. I’ve done so here.
To produce a very basic parallax scroll effect, the following example is sufficient. Note that browser prefixes, fallbacks, etc. have not been addressed. CSS values marked with /* e.g. */ may be changed at the designer’s discretion.
See my forked pen here.
<html><head><style>
html,
body {
width: 100%;
height: 100%;
overflow: auto;
}
body {
perspective: 1px; /* e.g. */
}
.background {
transform:
translateZ(-.4px)
scale(.6)
translateX(-104%)
translateY(-40%)
rotate(-5deg); /* e.g. */
}
.foreground {
transform:
translateZ(.25px)
translateX(50%)
scale(.75)
rotate(2deg); /* e.g. */
}
</style></head><body>
<img class="background"/>
<img class="foreground"/>
</body></html>
A minor correction to KitKat’s answer:
It seems that one doesn’t need transform-style:preserve-3d (at least in Chrome), and that the effect rather depends on the body’s overflow:auto. Remove this and the parallax fails.
Solution 2
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: fixedin 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.
<!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>
Solution 3
You should be able to get at least a partial effect by using CSS transitions. However, as Alejandro mentioned, CSS doesn't detect scroll.
Take a look at "That Cool Parallax Scrolling Effect - in Pure CSS3!" (http://css.dzone.com/articles/cool-parallax-scrolling-effect) for an example.
The key is using internal page links. So instead of scrolling, a user would click an in-page link and the page would then scroll up/down to the new section. As the page scrolls, the transitions provide the parallax effect.
Solution 4
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Scroll Up and Down this page to see the parallax scrolling effect.Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Here is a codepen
Pawan
Ubuntu and open source enthusiast, quizzing geek, gaming maniac, and a student too :)
Updated on July 18, 2022Comments
-
Pawan almost 2 years
I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique.
However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am only proficient with CSS3.
Can parallax scrolling be implemented with CSS3 only(with HTML5 if needed), instead of using jquery plugins? It would be nice if I could be pointed to some tutorials for the same.
Note: This is close to the effect I want to produce(http://jessandruss.us/)