JSFiddle - React, Tailwind, and code Playground

by Lachlan Arthur

HTML

<div class="list">
  <div class="bg">
    <img src="https://images.unsplash.com/photo-1551111523-9cc3ebcc7467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80">
    <img src="https://images.unsplash.com/photo-1551178474-2426605bc27f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80">
  </div>
  <div class="fg left">
    <img src="https://images.unsplash.com/photo-1551111523-9cc3ebcc7467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80">
    <img src="https://images.unsplash.com/photo-1551178474-2426605bc27f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80">
  </div>
  <div class="fg right">
    <img src="https://images.unsplash.com/photo-1551111523-9cc3ebcc7467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80">
    <img src="https://images.unsplash.com/photo-1551178474-2426605bc27f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80">
  </div>
</div>

SCSS

:root {
  --scroll-x: 0;
  --scroll-y: 0;
  --scroll-x-px: 0px;
  --scroll-y-px: 0px;
  --circle-radius: 100px;
}

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

img {
  max-width: 100%;
  height: auto;
}

.list {
  position: relative;
  
  .bg {
    // filter: blur( 5px );
    opacity: 0.5;
  }
  
  .fg {
    position: absolute;
    top: 0;
    left: 0;
    
    &.left {
      clip-path: circle(var(--circle-radius) at calc( 50vw - 150px ) calc( var(--scroll-y-px) + 50vh ) );
    }
    
    &.right {
      clip-path: circle(var(--circle-radius) at calc( 50vw + 150px ) calc( var(--scroll-y-px) + 50vh ) );
    }
  }
}

JavaScript

( () => {
	let lastX = -1;
  let lastY = -1;
  const root = document.documentElement;
  
  function update() {
  	const { pageXOffset: x, pageYOffset: y } = window;
  
    if ( lastX !== x ) {
    	root.style.setProperty('--scroll-x', x);
      root.style.setProperty('--scroll-x-px', `${x}px`);
    }
    if ( lastY !== y ) {
    	root.style.setProperty('--scroll-y', y);
      root.style.setProperty('--scroll-y-px', `${y}px`);
    }
    
    lastX = x;
    lastY = y;
    
    requestAnimationFrame( update );
  }
  
  update();
} )();