JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<main>
  <h1>Content</h1>

  <div class="parallax">
    <img src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1391&q=80">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ea officiis dolorum, nemo nulla excepturi consequatur sequi neque rerum hic officia ut animi quidem aut libero! Quod commodi officiis dignissimos soluta incidunt deserunt quibusdam iste, provident facere dolor laboriosam ipsam aliquid quasi maxime, voluptate accusamus culpa. Sit ab repellat est soluta, deleniti corporis vero distinctio in cumque quod dolores ad doloremque, reiciendis hic praesentium. Et, quibusdam, doloribus? Rerum iure, asperiores in, nostrum, facilis cupiditate ipsum minima dolore necessitatibus veniam consequatur. Quisquam pariatur fuga distinctio, ad saepe perspiciatis vero dolores modi sunt enim, neque at! Error dolore mollitia praesentium molestias consequuntur harum dolorum ipsam, ipsum accusamus ratione minima labore magni corporis pariatur ipsa tempora obcaecati. Ipsam quod quasi maxime ipsum itaque, qui incidunt, eveniet, aspernatur asperiores quaerat blanditiis officia repudiandae at voluptas? Ut delectus mollitia provident, natus, enim atque ullam tempora quaerat quasi aliquam velit beatae, amet odit voluptas ab doloremque illo id. Possimus quis, blanditiis dolor illum obcaecati, quod libero ipsam, minima cum necessitatibus cumque quo reiciendis nesciunt quae vel sequi illo. Asperiores, ea! Quaerat reiciendis perferendis numquam beatae, dolor debitis at. Commodi tempora dolore rem excepturi minus aperiam temporibus eos facilis, vel ipsum nobis, nulla facere accusamus, aspernatur nostrum eaque id dolores soluta consequatur vitae labore aut ipsam exercitationem reprehenderit esse? Quae, corrupti! Fugit dolor voluptatum debitis nobis voluptatibus blanditiis ducimus, delectus provident? Quia enim, itaque quos, a, modi est sunt error recusandae commodi,...

CSS

body {
  margin: 0;
}

main {
  height: 100vh;
  perspective: 1px;
  overflow-y: auto;
}

.parallax {
  height: 400px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
  border: 2px solid #ccc;
  border-left: none;
  border-right: none;
}

.parallax>* {
  transform: translate3d(-12%, -25%, -3px) scale(3.1);
  position: relative;
  z-index: -1;
}