Parallax example 1

by Richard Hunter

HTML

<div class="fixed"
></div>
<div class="content">

  <div class="near panel"></div>
  <div class="base panel"></div>
  <div class="far panel"></div>
  </div>
  <p>
  Notice that the further away the panel is from the viewer, the slower it appears to move upwards as you scroll. Notice also that the panels <i>always</i> move upwards.
</p>
<p>
  If you were to draw lines through the corners of each panel, you would find that they converge on a single point, known as the 'vanishing point'. You can see that the bottom edges of the panel are either all above, all below, or, in a single special case,
  in line with the vanishing point.
</p>
<p>
  A panel could never go in the opposite direction of the scroll because that would mean being below the vanishing point when other panels are above it.
</p>
<p>
If it's the case that the further away an element is the slower it moves, then it stands to reason that as the distance approaches infinity it will appear to cease to move altogether. We can leverage this to simulate the effect of a position fixed element.
</p>
<p>
But why not just use position fixed? Because as long as elements are within the same container we can easily set how they are layered on top of each other by setting their z-index property.
</p>
but an element with position fixed needs to be outside of the parallax container. This makes it impossible to position these elements on a layer in between two layers that are within the parallax container.

CSS

.content {
  perspective: 200px;
  perspective-origin: center;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: yellow;
  overflow-y: scroll;
}

.content:before {
  content: '';
  height: 1000px;
  display: block;
}

.panel {
  left: 50px;
  top: 150px;
  position: absolute;
  transform-origin: left top;
  border: solid 1px black;
  height: 100px;
  width: 100px;
  opacity: 0.3;
}

.base {
  transform: translateZ(0);
  background: green;
}

.far {
  transform: translateZ(-50px);
  background: blue;
}

.near {
  transform: translateZ(50px);
  background: red;
}

.fixed {
  background: red;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  opacity: 1;
  position: fixed;
  z-index: 0;
}