JSFiddle - React, Tailwind, and code Playground

by Brian Blakely

HTML

<img src="http://i.imgur.com/bMtV4.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat nisl, fringilla id luctus consectetur, consectetur eu lectus. Nulla eu ligula nec arcu placerat accumsan eu vehicula mauris. Ut lectus nisl, lacinia nec gravida id, fermentum vitae diam. Vivamus eu eros ante. Pellentesque commodo, massa eu aliquam egestas, lectus ante porttitor augue, non iaculis ante lorem tristique turpis. Sed a mi a augue rhoncus dictum et a ligula. Curabitur vehicula, ante in lobortis congue, neque libero aliquam urna, sed rutrum sem felis in augue. Phasellus ac lorem eu augue consequat varius sit amet sit amet risus. Suspendisse dignissim odio porta metus rutrum aliquam.

Ut viverra bibendum ante, sit amet egestas purus bibendum non. Suspendisse tempor erat et velit ultrices venenatis. Sed ut tellus eget orci elementum fermentum nec non odio. Nam orci metus, faucibus sed tempus sit amet, pellentesque at erat. Donec ac aliquam arcu. Nunc ac lobortis ipsum. Fusce pellentesque nunc id sapien blandit varius. Nam a consectetur enim.

Suspendisse ornare sodales eleifend. Vivamus erat nisi, semper nec varius non, fringilla a tortor. Donec dictum, odio venenatis accumsan tincidunt, arcu sapien cursus orci, eu vestibulum diam urna sed lacus. In et tortor justo, et consectetur sapien. Donec et sollicitudin dui. Aliquam congue urna et magna scelerisque lobortis. Fusce scelerisque ornare magna, a ullamcorper libero lobortis ac. Maecenas non lectus bibendum nisi fringilla fermentum. Curabitur posuere metus tincidunt augue pharetra at ultrices nisi placerat. Aliquam volutpat sem in est pharetra in tempor turpis tempor. Quisque suscipit nisl vitae dui posuere eu interdum urna lacinia. Morbi et velit mollis lacus varius varius sit amet eget urna. Integer adipiscing ornare libero, ac venenatis erat laoreet et.

Fusce lacinia leo diam, non tincidunt nunc. Sed venenatis aliquet mauris eget pharetra. Nunc euismod nunc vel nibh dictum nec facilisis justo...

CSS

img {
    float: left;
    margin: 3em;
    width: 50%;
    background: blue;
}

JavaScript

var scrollEvt =
    'onmousewheel' in window
        ? 'mousewheel'
        : 'DOMMouseScroll',
    scrollingDown,
    stretchFactor = 1,
    stretchTO = false,
    scrollPos,
    atTop,
    atBot,
    oRootStyle = document.documentElement.style,
    cssProp = function(prop) {
        var prefixes = 'webkit Moz O ms'.split(' '),
            pfxLen = prefixes.length,
            currProp;
        
        for(var i=0; i<pfxLen; ++i) {
            currProp = prefixes[i]+prop.charAt(0).toUpperCase()+prop.substr(1);
            if(oRootStyle[currProp] !== undefined) {
                return currProp;
            }
        }
        return oRootStyle[prop] !== undefined
            ? prop
            : false;
    },
    transformProp = cssProp('transform'),
    transitionProp = cssProp('transition');

oRootStyle[transitionProp] = '0.2s ease-in-out';
   
window.addEventListener(scrollEvt, function(e) {
    scrollingDown = e.wheelDelta < 0;
    scrollPos = document.body.scrollTop;
    atTop = scrollPos === 0;
    atBot = scrollPos >= document.body.offsetHeight - window.innerHeight;
    if(
        !transformProp
        || stretchFactor >= 1.25 
        || !atTop && !atBot
        || atTop && scrollingDown
        || atBot && !scrollingDown
    ) {
        return;
    }

    clearTimeout(stretchTO);

    stretchFactor += 0.05;

    oRootStyle[transformProp+'Origin'] =
        atTop
            ? '50% 0'
            : '50% 100%';
    
    oRootStyle[transformProp] = 'scaleY('+stretchFactor+')';

    stretchTO = setTimeout(function() {
        oRootStyle[transformProp] = '';
        stretchFactor = 1;
    }, 250);
}, false);