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="element_1">
    <h2>Element 1</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>
</div>
<br/>
<div id="element_2">
    <h2>Element 2</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...

JavaScript

// Invoke jqScrollAnim method when the page is loaded.
jQuery(document).ready(function() {
    // Animation for 'element_1'.
    jQuery("#element_1").jqScrollAnim({
        rep:  {start: 100, end: 400},
        animation: {type:'fade'}		
    });
    
    // Animation for 'element_2'.
    jQuery("#element_2").jqScrollAnim({
        rep:  {start: 100, end: 400},
        animation: {type:'number', property:'opacity', start:0, end:1}		
    });
});

// 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...