JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<h2>I'm a senior web developer. If you like this you can write me on [email protected] . </h2>
<div id="mumiaHolder">
    <img id="mumia" src="http://s7.postimg.org/ao6r4rtiz/Mummy.gif" alt="Mummy.gif"/>
</div>

CSS

* {
   margin: 0;
   padding: 0;
}
body, html {
    height: 100%;
    width: 100%;
}
#mumiaHolder {
    position: relative; 
    border: 2px solid black;
    margin: 0px auto;
    height: 90%;
    width: 90%;
    overflow: auto;
}

#mumia {
    position: absolute; 
    top: 0px; 
    left: 0px;
}

JavaScript

(function moveMumia() {
            var position = $("#mumia").offset(); // position = { left: number, top: number }
            oxPosition = position.left;
            oyPosition = position.top;

            var randomIntFromInterval = function (min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            }

            var yPosition = randomIntFromInterval(0, ($("#mumiaHolder").innerHeight() - $("#mumia").height()));
            var xPosition = randomIntFromInterval(0, ($("#mumiaHolder").innerWidth() - $("#mumia").width()));

            var positionAndClassContent = [ ".prMumia {",
                "animation: moveMumia 1s;",
                "-webkit-animation: moveMumia 1s; }",
                "@keyframes moveMumia {",
                "from {",
                        "top:" + oyPosition + "px;",
                        "left:" + oxPosition + "px;",
                "}",
                "to {",
                        "top:" + yPosition + "px;",
                        "left:" + xPosition + "px;",
                "}",
                "}",
                "@-webkit-keyframes moveMumia {",
                "from {",
                        "top:" + oyPosition + "px;",
                        "left:" + oxPosition  + "px;",
                "}",
                "to {",
                        "top:" + yPosition + "px;",
                        "left:" + xPosition + "px;",
                "} }"
            ].join("\n");

            $("#mumia").removeClass("prMumia");

            $("<style/>", {
               type: "text/css",
               id: "iposition",
               html: positionAndClassContent
            }).appendTo("body");

            $("#mumia").off("animationend webkitAnimationEnd oAnimationEnd");

            $("#mumia").on("animationend webkitAnimationEnd oAnimationEnd", function (event) {
                $("#iposition").remove();
                $("#mumia").css({
                    position: "absolute",
       ...