Parallax with variable speeds using SASS

test showing 3 elements whose position changes at variable rates to the scroll value

by Richard Hunter

HTML

<div class="container">
  <div class="miz">
    miz: constant rate
  </div>
  <div class="foo">
    foo: 1/2 rate
  </div>
  <div class="bar">
    bar: *2 rate
  </div>
  <div class="sentinel"></div>
</div>

SCSS

$perspective: 10;
body {
  overflow: hidden;
  height: 100%;
}

@function calculate-transform($rate, $left, $top) {
  $scale: 1 / $rate;
  $distance: ($perspective - ($scale * $perspective)) * 1px;
  @return translateX($scale * $left) translateY($scale * $top) translateZ($distance) scale($scale);
}

.container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: green;
  position: relative;
  perspective: 10px;
  perspective-origin: left top;
}

.sentinel {
  width: 1px;
  height: 1px;
  background: transparent;
  transform: translateY(2000px);
}

.foo,
.miz,
.bar {
  position: absolute;
  transform-origin: left top;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
}

.foo {
  $rate: 0.001;
  $left: 100px;
  $top: 100px;
  background: red;
  transform: calculate-transform($rate, $left, $top);
}

.miz {
  $rate: 1;
  $left: 150px;
  $top: 100px;
  background: lightblue;
  transform: calculate-transform($rate, $left, $top);
}

.bar {
  $rate: 2;
  $left: 200px;
  $top: 100px;
  background: yellow;
  transform: calculate-transform($rate, $left, $top);
}