JSFiddle - React, Tailwind, and code Playground

by DIdac Montero

HTML

<a id='1001238' attr-identity='ralf' attr-internalID='1001238' attr-externalID='' class='iframe embed-container'>
    <div class="rotating_wrap">
        <canvas width="250'" height="125" class="rotating"></canvas>
        <div>
            <h1>Hall 1</h1></div>
    </div>
</a>

CSS

div.rotating_wrap {
    position: relative;
    display: inline-block;
}
canvas.rotating {
    border-radius: 20px;
    border: 2px solid lightBlue;
}
.rotating_wrap > div {
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: 5%;
    margin:0 2px;
    right:0;
    left:0;
    transform: translateY(-50%);
    text-align:center;
}
.rotating_wrap > div > h1 {
    padding: 0;
    margin: 0;
    font-size: 20px;
    border-radius: 25px;
}

JavaScript

$("<img>").on("load", function () {
    var start = Date.now();
    var actualElem = $("#1001238");
    var canvas = actualElem.find("canvas").first();
    if (canvas) {
        canvas = canvas.get(0);
        var ctx = canvas.getContext("2d");
        var x = canvas.width;
        var y = canvas.height;
        draw(canvas, ctx, start, x + (x / 2), y + (y / 2), this, 80);
    } else {
        console.log("Could not find the canvas element");
    }
}).attr("src", "https://live2.clipnow.com/static_files/items/ralf/5513c8f77c847db32558129a/Tour/1080-images/R0010016.JPG").get(0);

//Speed: the highest the number, the faster (0:min, 100:max)
function draw(canvas, ctx, start, x, y, img, speed) {
    var y_offset = Math.abs(y - canvas.height) / 2;
    var real_speed = speed > 100 ? 100 : (100 - speed);
    var animate = function () {
        var part = (Date.now() - start) / real_speed % x;
        ctx.drawImage(img, part, -y_offset, x, y);
        ctx.drawImage(img, part - x, -y_offset, x, y);
        requestAnimationFrame(animate, canvas);
    }
    animate();
};