Fixed-position Parallax Scroll Effect With Pure CSS

Category: Animation , CSS & CSS3 | September 3, 2016
Author: kenyk7
Views Total: 5,072
Official Page: Go to website
Last Update: September 3, 2016
License: MIT

Preview:

Fixed-position Parallax Scroll Effect With Pure CSS

Description:

A pure CSS solution of implementing a fixed-position parallax effect on background images when scrolling down the webpage. Works both on mobile and desktop.

How to use it:

The html structure for the parallax area.

<div class="parrallax-content">
  <div class="parrallax">
  </div>
</div>

Add a background to the parallax area.

.parrallax-content{
  background-image: url(1.jpg);
}

The core CSS styles for the parallax scroll effect.

.parrallax-content{
  position: relative;
  overflow: hidden;
  height: 80vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

.parrallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parrallax:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 120% auto;
}

 

You Might Be Interested In:


One thought on “Fixed-position Parallax Scroll Effect With Pure CSS

  1. Joaquin Rotharmel

    Worst experience on mobile, The demo just dont work and is a mess.

    Reply

Leave a Reply