JSFiddle - React, Tailwind, and code Playground

by Khursheed Ali

HTML

<div id="main" style="width:99%;min-height:100px;">

       <img src="street cartoon.jpg">
</div>
<div id="scroll" style="width:99%;min-height:100px;overflow:hidden;border:solid black thin;position:absolute;">

       <img src="scroll.jpg" style="margin-top: 25px;">

</div>

JavaScript

$.fn.marquee = function (klass) {
    var newMarquee = [],
        last = this.length;

    // works out the left or right hand reset position, based on scroll
    // behavior, current direction and new direction
    function getReset(newDir, marqueeRedux, marqueeState) {
        var behavior = marqueeState.behavior,
            width = marqueeState.width,
            dir = marqueeState.dir;
        var r = 0;
        if (behavior == 'alternate') {
            r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : width;
        } else if (behavior == 'slide') {
            if (newDir == -1) {
                r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
            } else {
                r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : 0;
            }
        } else {
            r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
        }
        return r;
    }

    // single "thread" animation
    function animateMarquee() {
        var i = newMarquee.length,
            marqueeRedux = null,
            $marqueeRedux = null,
            marqueeState = {},
            newMarqueeList = [],
            hitedge = false;

        while (i--) {
            marqueeRedux = newMarquee[i];
            $marqueeRedux = $(marqueeRedux);
            marqueeState = $marqueeRedux.data('marqueeState');

            if ($marqueeRedux.data('paused') !== true) {
                // TODO read scrollamount, dir, behavior, loops and last from data
                marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

                // only true if it's hit the end
                hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);

                if ((marqueeState.behavior == 'scroll' && marqueeState.last ==...