JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<p>fps</p>
<div>
    <img src="http://img.blogonline.ru/bl/posts/46/1156681146_Oksana_Fedorova4.jpg" />
    <img src="http://img.blogonline.ru/bl/posts/46/1156681146_Oksana_Fedorova4.jpg" />
    <img src="http://img.blogonline.ru/bl/posts/46/1156681146_Oksana_Fedorova4.jpg" />
</div>

<button id="prepare">move to 0, 0</button>

<button id="anim1">animate()</button>
<button id="anim2">animate() slower fps</button>
<button id="anim3">animate() step </button>
<button id="anim4">animate() step, slower fps</button>
<button id="anim5">manually</button>

CSS

div {
    width: 400px;
    height: 300px;
    overflow: auto;
}

button {
    display: block;
}

img {
    zoom: 1;
}

JavaScript

var $div = $("div"),
    from = [$div.scrollLeft(), $div.scrollTop()],
    to = [900, 3000],
    durat = 6000,
    slowerFps = 50,
    setInterval = function(value) {
        $.fx.interval = value;
        $("p").html($.fx.interval);
    },
    resetInterval = function() {
        setInterval(13);
        //$("img").css('zoom', 4);
    },
    doAnimate = function() {
        $div.animate({
            scrollLeft: to[0],
            scrollTop: to[1]
        }, durat);
    },
    doAnimateStep = function() {
        var s = 0;
        $div.animate({
            s: to[0]
        }, {
            duration: durat,
            step: function(now, fx) {
                $div.
                  scrollLeft(now).
                  scrollTop(now*to[1]/to[0]);
                $("img").css({
                    'zoom': 4-now*3/1000
                });
            }
        });
    };

$("#prepare").click(function() {
    $div.scrollLeft(0).scrollTop(0);
    $("img").css('zoom', 4);
});

$("#anim1").click(function() {
    resetInterval();
    doAnimate();
});

$("#anim2").click(function() {
    setInterval(slowerFps);
    doAnimate();
});

$("#anim3").click(function() {
    resetInterval();
    doAnimateStep();
});

$("#anim4").click(function() {
    setInterval(slowerFps);
    doAnimateStep();
});

$("#anim5").click(function() {
    resetInterval();
    var s = from[0],
        t = 0,
        offset = (to[0] - from[0])/(durat/$.fx.interval),
        run = function () {
            $div.scrollLeft(s).scrollTop(s*to[1]/to[0]);
            s += offset;
            if (s < to[0]) {
                t = setTimeout(run, $.fx.interval);
            }
        };
    t = setTimeout(run, $.fx.interval);
});