CSS3 Parallax Scrolling Effect

Category: Animation , CSS & CSS3 , Recommended | July 31, 2017
Views Total:4,276 views
Official Page:Go to website
Last Update:July 31, 2017


CSS3 Parallax Scrolling Effect


A smooth, cross-platform parallax scrolling effect implemented in pure CSS & CSS 3 transforms.

How to use it:

Add the parallax image & content to the webpage.

<div class="container">
  <div class="herounit">
    <img src="parallax.png" alt="Main Image" class="heroimg">
    <div class="title">
      Parallax Text Here
    <div class="herotext">
      <h1>More Content Here</h1>

The main CSS to apply the parallax scrolling effect to the image & content.

.container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-overflow-scrolling: touch;
.herounit {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
.heroimg {
  -webkit-transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
  position: relative;
 top: calc(((100vh - 51.54vw) / 4) * -2);


You Might Be Interested In:

Leave a Reply