parallax example

by Richard Hunter

HTML

<div class="container">
  <div class="foo">
    foo
  </div>
  <div class="bar">
    bar
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.container {
  background: pink;
  height: 100vh;
  border: solid 2px red;
  perspective: 1px;
  perspective-origin: top left;
  position: relative;
  overflow-y: scroll;
  display: flex;
}

.container:before {
  content: '';
  top: 1000px;
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  background: green;

}

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

.foo {
  left: 0;
  background: orange;
  transform: translateZ(0) scale(1);
}

.bar {
  background: blue;
  transform:  translateZ(-1px) scale(2) translateX(200px);
}