JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div id="container">
  <section class="section parallax bg1">
  <bg>
    <h1>The Neptunes</hi>
  </bg>
  </section>
  <section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis at sapien sed commodo. Duis malesuada ultrices mollis. Duis enim ex, consectetur vel nulla eu, finibus venenatis mauris. Donec pharetra, ligula vel fringilla pretium, risus quam tempor velit, at ultrices dolor magna sit amet arcu. Curabitur sollicitudin luctus massa quis posuere. Nunc id nisl felis. Nunc massa nunc, iaculis sit amet convallis eget, viverra nec sapien. Vestibulum interdum luctus mi, et luctus mi. Aenean placerat egestas erat ac commodo. Vivamus a scelerisque diam. Sed eu feugiat metus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis at sapien sed commodo. Duis malesuada ultrices mollis. Duis enim ex, consectetur vel nulla eu, finibus venenatis mauris. Donec pharetra, ligula vel fringilla pretium, risus quam tempor velit, at ultrices dolor magna sit amet arcu. Curabitur sollicitudin luctus massa quis posuere. Nunc id nisl felis. Nunc massa nunc, iaculis sit amet convallis eget, viverra nec sapien. Vestibulum interdum luctus mi, et luctus mi. Aenean placerat egestas erat ac commodo. Vivamus a scelerisque diam. Sed eu feugiat metus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis at sapien sed commodo. Duis malesuada ultrices mollis. Duis enim ex, consectetur vel nulla eu, finibus venenatis mauris. Donec pharetra, ligula vel fringilla pretium, risus quam tempor velit, at ultrices dolor magna sit amet arcu. Curabitur sollicitudin luctus massa quis posuere. Nunc id nisl felis. Nunc massa nunc, iaculis sit amet convallis eget, viverra nec sapien. Vestibulum interdum luctus mi, et luctus mi. Aenean placerat egestas erat ac commodo. Vivamus a scelerisque diam. Sed eu feugiat metus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis at...

CSS

/* Tiny reset thingy */
body,html{margin:0;padding:0;}

#container {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;
  color: white;
  text-shadow: 0 0 5px #000;
}

bg {
  /* Display and position the pseudo-element */
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
bg {
  background-image: url('https://placekitten.com/g/900/700');
}