JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div id="skrollr-wrapper">
   
    <div id="box2">box2</div>
</div>

<div id="test">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus mauris, lacinia eget mi eget, vehicula tincidunt leo. Vestibulum fringilla cursus nisi, non commodo ligula rutrum laoreet. Morbi faucibus nisi id hendrerit dignissim. Maecenas condimentum, quam ac porta consequat, mauris nisi tincidunt risus, at laoreet nulla ligula eu dolor. Etiam sed eros eu risus viverra pellentesque. Sed et mattis felis, vel hendrerit justo. Fusce id vestibulum lectus, vel fermentum purus. Praesent aliquam scelerisque lacus faucibus finibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus mauris, lacinia eget mi eget, vehicula tincidunt leo. Vestibulum fringilla cursus nisi, non commodo ligula rutrum laoreet. Morbi faucibus nisi id hendrerit dignissim. Maecenas condimentum, quam ac porta consequat, mauris nisi tincidunt risus, at laoreet nulla ligula eu dolor. Etiam sed eros eu risus viverra pellentesque. Sed et mattis felis, vel hendrerit justo. Fusce id vestibulum lectus, vel fermentum purus. Praesent aliquam scelerisque lacus faucibus finibus.</div>

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;
}

#test{position:relative;}
#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: 20%;
  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(-30%)'], [1500, 'transform:translateX(300%)']]);
    
    skrollr.init({
        smoothScrolling: false
    });
});