JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="img">
    <img src="http://picsum.photos/300/300" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div class="img">
    <img src="http://picsum.photos/400/400" alt="">
</div>
<div style="height: 10000px; position: absolute; width: 1px;"></div>

CSS

.img {
    display: inline-block;
    margin: 50px;
    transform-origin: top;
    transition: .5s;
}
.img.active {
    transform: scaleY(1.1);
}

JavaScript

$.fn.easeScroll=function(e){!function(){function t(){m.keyboardSupport&&l("keydown",r)}function a(){if(document.body){var e=document.body,a=document.documentElement,o=window.innerHeight,r=e.scrollHeight;if(b=document.compatMode.indexOf("CSS")>=0?a:e,d=e,t(),v=!0,top!=self)w=!0;else if(r>o&&(e.offsetHeight<=o||a.offsetHeight<=o)){var n=!1;if(a.style.height="auto",setTimeout(function(){n||a.scrollHeight==document.height||(n=!0,setTimeout(function(){a.style.height=document.height+"px",n=!1},100))},10),b.offsetHeight<=o){var i=document.createElement("div");i.style.clear="both",e.appendChild(i)}}m.fixedBackground||h||(e.style.backgroundAttachment="scroll",a.style.backgroundAttachment="scroll")}}function o(e,t,a,o){if(o||(o=1e3),l=a,i=(i=t)>0?1:-1,l=l>0?1:-1,(g.x!==i||g.y!==l)&&(g.x=i,g.y=l,k=[],D=0),1!=m.accelerationMax){var r=+new Date-D;if(r<m.accelerationDelta){var n=(1+30/r)/2;n>1&&(n=Math.min(n,m.accelerationMax),t*=n,a*=n)}D=+new Date}var i,l;if(k.push({x:t,y:a,lastX:0>t?.99:-.99,lastY:0>a?.99:-.99,start:+new Date}),!x){var c=e===document.body,u=function(){for(var r=+new Date,n=0,i=0,l=0;l<k.length;l++){var d=k[l],p=r-d.start,f=p>=m.animationTime,h=f?1:p/m.animationTime;m.pulseAlgorithm&&(h=(v=h)>=1?1:0>=v?0:(1==m.pulseNormalize&&(m.pulseNormalize/=s(1)),s(v)));var w=d.x*h-d.lastX>>0,g=d.y*h-d.lastY>>0;n+=w,i+=g,d.lastX+=w,d.lastY+=g,f&&(k.splice(l,1),l--)}var v;c?window.scrollBy(n,i):(n&&(e.scrollLeft+=n),i&&(e.scrollTop+=i)),t||a||(k=[]),k.length?A(u,e,o/m.frameRate+1):x=!1};A(u,e,0),x=!0}}function r(e){var t=e.target,a=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==S.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||a)return!0;if(c(t,"button")&&e.keyCode===S.spacebar)return!0;var r=0,n=0,l=i(d),u=l.clientHeight;switch(l==document.body&&(u=window.innerHeight),e.keyCode){case S.up:n=-m.arrowScroll;break;case S.down:n=m.arrowScroll;break;case S.spacebar:n=-(e.shiftKey?1:-1)*u*.9;break;case...