JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="flex">
  <div>
    <h1>
      DESI<br>GNER
    </h1>
    <p>
      No need to worry about your ranking on Google and other search engines. Massive Dynamic is a SEO optimized WordPress theme and control how your websites are displayed in search results.Massive Dynamic is a fully responsive theme. Smartphone.
    </p>
  </div>

  <div class="mega my-element">
    <img src="http://via.placeholder.com/250x460" alt="">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 100px;
}

body {
  height: 2000px;
}

JavaScript

/**
 * jQuery plugin paroller.js v1.4.6
 * https://github.com/tgomilar/paroller.js
 * preview: https://tgomilar.github.io/paroller/
 **/
(function(factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    define('parollerjs', ['jquery'], factory);
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    factory(jQuery);
  }
})(function($) {
  'use strict';

  var working = false;
  var scrollAction = function() {
    working = false;
  };

  var setDirection = {
    bgVertical: function(elem, bgOffset) {
      return elem.css({
        'background-position': 'center ' + -bgOffset + 'px'
      });
    },
    bgHorizontal: function(elem, bgOffset) {
      return elem.css({
        'background-position': -bgOffset + 'px' + ' center'
      });
    },
    vertical: function(elem, elemOffset, transition, oldTransform) {
      (oldTransform === 'none' ? oldTransform = '' : true);
      return elem.css({
        '-webkit-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
        '-moz-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
        'transform': 'translate(0,' + elemOffset + 'px)' + oldTransform,
        'transition': transition,
        'will-change': 'transform'
      });
    },
    horizontal: function(elem, elemOffset, transition, oldTransform) {
      (oldTransform === 'none' ? oldTransform = '' : true);
      return elem.css({
        '-webkit-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
        '-moz-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
        'transform': 'translate(' + elemOffset + 'px, 0)' + oldTransform,
        'transition': transition,
        'will-change': 'transform'
      });
    }
  };

  var setMovement = {
    factor: function(elem, width, options) {
      var dataFactor = elem.data('paroller-factor');
      var factor = (dataFactor) ? dataFactor :...