CSS Only Parallax

/* https://codepen.io/irksum/pen/qxbarb */

@supports ( (--plx: 0) and (position: sticky) ) {
  :root {
      --plx-perspective: 1;
  }
  .parallax {
      position: sticky;
      width: 100vw;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: scroll;
      transform-style: preserve-3d;
      perspective: calc(var(--plx-perspective) * 1px);
      perspective-origin: 0 0;
      perspective-origin-x: 100%;
  }
  .parallax__child {
      --plx-scale: calc(var(--plx-perspective) - var(--plx-z));
      transform: translateZ(calc(var(--plx-z) * 1px)) translateY(calc(50% - 50vh)) scale(var(--plx-scale));
      transform-origin: 0 0;
      transform-origin-x: 100%;
  }
  .parallax__child--fast {
      --plx-z: .3;
  }
  .parallax__child--slow {
      --plx-z: -.3;
  }
}

* {
  box-sizing: border-box;
}

article {
  padding: 15%;
}