PROWAREtech
CSS: Parallax Effect Landing Page
HTML and CSS only.
This landing page with parallax effect requires HTML and CSS but no JavaScript to function.
This works thanks to the perspective: 1px;, transform-style: preserve-3d; and transform: translateZ(-1px) scale(2); code clips.
Warning, this CSS is not compatible with IE11, but the text is all readable and the screen is scrollable. The parallax effect is compatible with Firefox, Chrome and Safari, except on mobile/iOS devices; the work around is to use a JavaScript Parallax Effect Library.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px; /* note this line */
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: sans-serif;
}
p {
font-size: 2vh;
text-shadow: 2px 2px rgba(0,0,0,0.33);
}
h1 {
font-size: 10vh;
text-shadow: 5px 5px rgba(0,0,0,0.33);
}
.slide {
position: relative;
padding: 0;
height: 100vh;
max-height: 100vh;
width: 100vw;
transform-style: preserve-3d; /* note this line */
display: table;
}
.slide div {
text-align: center;
color: #fff;
display: table-cell;
vertical-align: middle;
padding: 0 5%;
}
.slide::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2); /* note this line */
}
.slide,
.slide::before {
background-size: cover;
background-position: center center;
}
.one::before {
background-image: url(https://picsum.photos/id/1010/1920/1080);
}
.two {
background-image: url(https://picsum.photos/id/1005/1920/1080);
z-index: 1;
}
.three::before {
background-image: url(https://picsum.photos/id/1011/1920/1080);
}
.four {
background-image: url(https://picsum.photos/id/1015/1920/1080);
}
#footer {
position: relative;
min-height: 100vh;
width: 100vw;
padding: 0;
display: table;
background-color: #000;
color: #eee;
}
#footer div {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 5%;
}
</style>
</head>
<body>
<div class="slide one">
<div>
<h1>Parallax Effect</h1>
</div>
</div>
<div class="slide two">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
</div>
</div>
<div class="slide three">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
</div>
</div>
<div class="slide four">
<div>
<h1>Contact Us</h1>
</div>
</div>
<div id="footer">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias error cupiditate dicta asperiores numquam perferendis commodi sunt quibusdam minima praesentium? Sed minus fugit harum repudiandae facere quam aspernatur ratione quod?</p>
<p>Asperiores necessitatibus reprehenderit quisquam non, omnis quod fugiat dolores facere aliquam architecto, tenetur rerum pariatur perspiciatis reiciendis magnam iusto, est assumenda ipsum! Culpa corrupti in veniam eaque incidunt provident explicabo.</p>
<p>Veniam eveniet accusamus explicabo minima consequuntur placeat enim voluptate nostrum maiores similique itaque ipsam optio sed error in ratione nobis repudiandae commodi, officia dolore? Aperiam quibusdam saepe dolorem est quis.</p>
</div>
</div>
</body>
</html>
Coding Video
Comment
