Parallax example 3

by Richard Hunter

HTML

<div id="near" class="near panel">
</div>
<div id="far" class="far panel">

</div>
sjkdj sdjkfjs sjkfjsf

CSS

body {
  margin: 0;
  height: 2000px;
}

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

.base {
  background: green;
}

.far {
  background: blue;
}

.near {
  background: red;
}

JavaScript

const near = document.getElementById('near');

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const scroll = window.scrollY;
    
    near.style.transform = `translateZ(0) translateY(${scroll * 0.5 + 100}px)`;
    far.style.transform = `translateZ(0) translateY(${scroll * 0.3 + 100}px)`;
  });
});