<h1 class="title">Weeeeeee! I'm a Parallax'y Thing. Watch me as I move slower than the page!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<img src="//fillmurray.com/400/300"/>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<img src="//fillmurray.com/400/300"/>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<img src="//fillmurray.com/400/300"/>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, blanditiis rem. Quia, earum nostrum. Accusantium non quod dicta reiciendis, quibusdam fugit ducimus modi error sed delectus, accusamus, id odit explicabo!</p>

body {
  padding: 10em 2em;
}

img { max-width: 100% }

.title {
  margin-bottom: 2em;
  will-change: transform;
}

const title = document.querySelector('h1.title');
const speed = 0.2;
title.style.transform = 'translateY( calc( var(--scrollparallax) * 1px ) )';
   
window.addEventListener('scroll', function() {
  title.style.setProperty("--scrollparallax", (document.body.scrollTop || document.documentElement.scrollTop) * speed);
});