JSFiddle - React, Tailwind, and code Playground

HTML

<!-- For a full explanation of this code, please refer to the blogpost at http://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/ -->

<div id="skrollr-wrapper">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</div>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>

CSS

/* For a full explanation of this code, please refer to the blogpost at http://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/ */

body {
  padding: 0;
  margin: 0;
  background: #fff fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}

#skrollr-wrapper {
  /* make sure the boxes stay in place while you scroll by wrapping them in this fixed div: */
  width:100%;
  height:100%;
  position:fixed;
  overflow: hidden;
}

#skrollr-wrapper div {
  position: absolute;
  overflow: hidden;
  text-align: center;
}

#box1 {
  background: blue;
  margin: auto;
  top: 0; left: 0; right: 0;  bottom: 0;
}

#box2 {
  background: red;
  height: 100px;
  width: 100%;
  margin-top: 50px;
}

JavaScript

// For a full explanation of this code, please refer to the blogpost at http://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/

// setSkrollr function extracted from https://www.pingdom.com/2013/
var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var d = data[i],
            px = d[0];
            css = d[1];
        $el.attr('data-' + px, css);
    }
}

jQuery(function($) {
    setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]);
    setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]);
    
    skrollr.init({
        smoothScrolling: false
    });
});