JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="parallax">
  <div class="step">

    <div class="layer bottom half-left">
      <div class="content  black-white">
        <h1>Step 1 bottom third.left</h1>
        <p></p>
      </div>
    </div>


    <div class="layer top  half-right ">
      <div class="content black-white">
        <h1>Step 1 top third-right</h1>
        <p></p>
      </div>
    </div>
    
  </div>
  <div class="step">
    <div class="layer bottom half-right">
      <div class="content  black-white">
        <h1>Step 2 bottom third-right</h1>
        <p></p>
      </div>
    </div>
    <div class="layer top half-left">
      <div class="content  black-white">
        <h1>Step 1 top third.left</h1>
        <p></p>
      </div>
    </div>
  </div>
  <div class="step">
    <div class="layer middle half-top">
      <div class="content black-white">
        <h1>Step 3 middle half-top</h1>
        <p></p>
      </div>
    </div>
  </div>
  <div class="step">
    <div class="layer bottom full">
      <div class="content black-white">
        <h1>Step 3 top full-height</h1>
        <p></p>
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.parallax {
  height: 100%;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-perspective-origin-x: 100%;
  perspective-origin: 100%;
  outline: 5px solid red;
}

.step {
  position: relative;
  height: 500px;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  outline: 4px solid green;
}

.layer {
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transform-origin-x: 100%;
  transform-origin: 100%;
  outline: 3px solid blue;
  max-height: 100%;
}

.content {
  padding: 10%;
  outline: 1px solid orange;
}

.bottom {
  z-index: 1;
  transform: translateZ(-100px) scale(1.333);
}

.middle {
  z-index: 2;
  transform: translateZ(0px) scale(1);
}

.top {
  z-index: 3;
  transform: translateZ(100px) scale(0.66);
}

.half-left {
  text-align: left;
  padding-right: 50%;
  width: 50%;
}

.half-right {
  text-align: right;
  width: 50%;
  padding-left:50%;
}

.half-center {
  text-align: center;
  width: 50%;
  right: 25%;
  left: 25%;
}

.half-top {
  text-align: center;
  margin-bottom: 50%;
}

.half-bottom {
  text-align: center;
  margin-top: 50%;
}

.full {
  text-align: center;
  height: 100vh;
  top : 0;
  bottom :0;
  right:0;
  left;0;
}

.black-white {
  color: #F00;
  background: #FFF;
}

JavaScript

var title = "test"
var content = ["Nam imperdiet tempus dolor, tincidunt elementum lorem tincidunt et. Duis tincidunt ex mattis ultricies tempus. Pellentesque id sapien neque.", "Nam imperdiet tempus dolor, tincidunt elementum lorem tincidunt et. Duis tincidunt ex mattis ultricies tempus. Pellentesque id sapien neque. Aliquam nec nulla non magna consequat imperdiet eget nec metus. Quisque et metus in sem volutpat molestie.", "Nam imperdiet tempus dolor, tincidunt elementum lorem tincidunt et. Duis tincidunt ex mattis ultricies tempus. Pellentesque id sapien neque. Aliquam nec nulla non magna consequat imperdiet eget nec metus. Quisque et metus in sem volutpat molestie.Nam imperdiet tempus dolor, tincidunt elementum lorem tincidunt et. Duis tincidunt ex mattis ultricies tempus. Pellentesque id sapien neque. Aliquam nec nulla non magna consequat imperdiet eget nec metus. Quisque et metus in sem volutpat molestie."]

randContent = function() {
  return content[Math.floor(Math.random() * 3)];
}

posZ = function(z) {
  p = 300
  return 1 + (z * -1) / p
}

var h1s = document.querySelectorAll("h1")
var ps = document.querySelectorAll("p")


for (var p = 0; p < ps.length; p++) {
  ps[p].innerHTML = randContent();
}