JSFiddle - React, Tailwind, and code Playground

by jfmdev

HTML

<p>Scroll down in order to see the animation</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="some_element">
    <h2>Some element</h2>
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
    Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus 
    senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod 
    consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus 
    placerat per.</p>
    <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco 
    dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam 
    cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas 
    qualisque. Eos vocibus deserunt quaestio ei.</p>
    <p>Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei,
    has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris 
    ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis 
    liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad 
    sed, nobis feugiat similique usu ex.</p>
</div>
<div id="another_element">
    <h2>Another element</h2>
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
    Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus 
    senserit definiebas an eos. Eu sit...

JavaScript

// Invoke jqScrollAnim method when the page is loaded.
jQuery(document).ready(function() {
    jQuery("#some_element").jqScrollAnim({
        rep:  {start: 0, end: 200, ref:'upper-bottom'},
        animation: {type:'fade'}		
    });
    jQuery("#another_element").jqScrollAnim({
        rep:  {start: 0, end: 200, ref:'base-bottom'},
        animation: {type:'fade'}		
    });
});

// jqScrollAnim plugin's definition
(function(e){e.fn.jqScrollAnim=function(t){function s(t){var r=0;var i=u();var s=n.stake===null?t:n.stake;var r=o(s,n.rep,i);if(r>=1&&n.rew.start!==null&&n.rew.end!==null){r=1-o(s,n.rew,i)}if(r!==e.data(t,"last_progress")){for(var a=0;a<n.animations.length;a++){var f=n.animations[a];var l=f.start!==null?f.start:e.data(t,"css-"+f.property);var c=f.end!==null?f.end:e.data(t,"css-"+f.property);if(f.type==="custom"){f.action(t,n,r)}else if(f.type==="number"){t.css(f.property,l*(1-r)+c*r+""+f.unit)}else if(f.type==="integer"){if(c!=="out-left"&&c!=="out-right"&&l!=="out-left"&&l!=="out-right"){t.css(f.property,parseInt(l*(1-r)+c*r,10)+""+f.unit)}else{var h=e.data(t,"offset").left;var p=h;if(c==="out-left")p=-t.outerWidth();if(c==="out-right")p=e(window).width();if(l==="out-left")h=-t.outerWidth();if(l==="out-right")h=e(window).width();var d=h*(1-r)+p*r;if(f.property==="left"){var v=d-(e.data(t,"offset").left-e.data(t,"css-left"));t.css("left",parseInt(v,10)+""+f.unit)}else{var v=e.data(t,"offset").left+e.data(t,"css-right")-d;t.css("right",parseInt(v,10)+""+f.unit)}}}else if(f.type==="color"){var m=parseInt(l[0]*(1-r)+c[0]*r,10);var g=parseInt(l[1]*(1-r)+c[1]*r,10);var y=parseInt(l[2]*(1-r)+c[2]*r,10);t.css(f.property,"rgb("+m+","+g+","+y+")")}else if(f.type==="sequence"){var b=parseInt(r*(f.end.length-1));t.css(f.property,f.end[b])}}e.data(t,"last_progress",r)}}function o(e,t,n){var r=t.ref.lastIndexOf("upper-")>=0?e.offset().top:e.offset().top+e.height();var i=t.ref.lastIndexOf("-top")>=0?n.y_min:n.y_max;var s=i-r;var...