JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/perspective.js/lib/perspective.js"></script>

<div class="wrap">
  <div class="container" data-scroll-stage-id="basic">
    <p class="slow" data-scroll-item-id="slow">SLOW</p>
    <p class="fast" data-scroll-item-id="fast">FAST</p>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
}
.wrap {
  height: 100%;
  width: 100%;
}
.container {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}
p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 50px;
}
.slow {
  top: 30%;
}
.fast {
  top: 60%;
}

Babel + JSX

function start() {
  new perspective.Scroll('.wrap', {
    stages: [{
      id: 'basic',
      scrollNumber: 60,
      transition: 0,
      easing: 'linear',
      items: [{
        id: 'slow',
        effects: [{
          property: 'transform',
          start: 'translateY(0px)',
          end: 'translateY(-50px)'
        }]
      }, {
        id: 'fast',
        effects: [{
          property: 'transform',
          start: 'translateY(0px)',
          end: 'translateY(-180px)'
        }]
      }]
    }]
  })
}

window.onload = start