CSS3 Parallax Scrolling Effect | CSS Script

Author: Jobayer-Ahmed
Views Total: 4,242 views
Official Page: Go to website
Last Update: July 31, 2017
License: MIT


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);


See also  iOS Style Loading Spinner with Pure CSS - ispinner

Leave a Reply

Your email address will not be published. Required fields are marked *