CSS Only Parallax

css-only-parallax.markdown

CSS Only Parallax

No JS here! Works great for large header images. The parallax depth effect is achieved with some 3D transforms and perspective properties.

A Pen by Tony Dolan on CodePen.

License.

index.html

<!-- The key with the HTML is to have a container that wraps all of your content. The image that you give the parallax effect to lives inside the container above the other content for your page. -->

<div class="container">
  <div class="image">
    <h1 class="text">Scroll Down</h1>
  </div>
  <div class="content">
    <h2>Hello world</h2>
  </div>
</div>

script.js

// Nothing to see here

style.scss

// Inspired by this article https://www.okgrow.com/posts/css-only-parallax

.container {
  // Important properties for the effect
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  
  background-color: #f2f2f2;
}

.image {
  // Important properties for the effect
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  position: relative;
  height: 100vh;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  
  background-image: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  text-align: center;
}

.content {
  // Important properties for the effect
  display: block;
  position: relative;
  background-color: white;
  z-index: 1;
  padding: 12rem 4rem;
  text-align: center;
  color: white;
  background-color: #222;
  font-family: 'Montserrat', sans-serif;
}

.text {
  color: white;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  position: absolute;
  bottom: 2rem;
  font-family: 'Montserrat', sans-serif;
}

body {
  margin: 0;
}