JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="back">

</div>

<div id="wrapper">
  <div id="plate">
    <div id="target"></div>
  </div>
</div>

CSS

body {
  font-size: calc(16px + 2vw);
  line-height: 110%;
  height: 1000vh;
}

#wrapper {
  perspective: 180vw;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#plate {
  width: 80%;
  height: 80vh;
  padding: 15px;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#back {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
}

JavaScript

function randomInt(min, max) {
  return Math.random() * (max - min) + min;
}


function mapRange(value, low1, high1, low2, high2) {
  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

function getScrollPercent() {
  var h = document.documentElement,
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';
  return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}



$(document).ready(function() {
  function pullStuff(keyword, target) {

    $.ajax({
      type: "GET",
      url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + keyword + "&callback=?",
      contentType: "application/json; charset=utf-8",
      async: false,
      dataType: "json",
      success: function(data, textStatus, jqXHR) {

        var markup = data.parse.text["*"];

        function strip(html) {
          var tmp = document.createElement("DIV");
          tmp.innerHTML = html;
          return tmp.textContent || tmp.innerText || "";
        }

        var cleanmarkup = strip(markup)
          .replace(/(\r\n|\n|\r)/gm, " ")
          .replace(/\s\s+/g, ' ')
          .replace(/([.?!])\s*(?=[A-Z])/g, "$1|")
          .replace(/[{()}]/g, '')
          .replace(/[\u0300-\u036f]/g, "");

        var arr = cleanmarkup.split("|");

        var arrWithoutShortSentences = [];

        for (var i = 0; i < arr.length; i++) {

          if (arr[i].length > 10) {
            arrWithoutShortSentences.push(arr[i]);
          }

        }

        console.log(arrWithoutShortSentences, arrWithoutShortSentences.length);

        var randomnt = Math.floor(randomInt(0, arrWithoutShortSentences.length));

        var sentence = arrWithoutShortSentences[randomnt];

        $(target).append(sentence);

      },
      error: function(errorMessage) {

      }
    });


  }
  pullStuff("Laozi", "#target");
  pullStuff("Laozi", "#back");

});









$(window).scroll(function() {


  var rotation = mapRange(getScrollPercent(),...