Pure CSS Parallax Scrolling Effect

Category: Animation , CSS & CSS3 , Recommended | March 10, 2015
Author: JohnrBell
Views Total: 8,003
Official Page: Go to website
Last Update: March 10, 2015
License: MIT

Preview:

Pure CSS Parallax Scrolling Effect

Description:

A simple pure CSS solution to create subtle parallax effects on Html elements when scrolling the web page.

How to use it:

Create a fixed background with some parallax text.

<div id="title" class="section header">
  <h1>Some text...</h1>
</div>

Setup the parallax scrolling effect in CSS.

html {
  height: 100%;
  overflow: hidden;
}

body { 
  margin:0;
  padding:0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 1px;
}

.section {
  position: relative;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: 50% 50% / cover;
}

#title {
  background-image: url("background.jpg");
  background-attachment: fixed;
}

You Might Be Interested In:


One thought on “Pure CSS Parallax Scrolling Effect

  1. arkhamDev

    I’ve been looking for this for a while and your solution is easier to implement great job

    Reply

Leave a Reply