JSFiddle - React, Tailwind, and code Playground

by mach3ss

HTML

<script src="https://github.com/mach3/js-timeline-enterframe/raw/master/timeline.min.js"></script>
<h1>Click Anywhere</h1>
<p id="log"></p>
<p id="item">(/･ω･)/</p>

CSS

h1{
    font-size:16px;
    font-weight:bold;
    font-family:Verdana, Arial;
    margin:1em 0;
}
p{
    font-size:12px;
    font-family:Verdana, Arial;
    margin:1em 0;
}

#item{
    font-weight:bold;
    font-size:16px;
    position:absolute;
    left:0;
    top:0;
    white-space: nowrap;
}

JavaScript

(function() {

    var tl = new Timeline(),
        point = {
            left: 100,
            top: 100
        };

    tl.bind(tl.EVENT_ENTER_FRAME, function() {
        var item, offset, _pos;
        item = $("#item");
        offset = item.offset();
        _pos = function(start, end) {
            return Math.floor(start + (end - start) / 5);
        };
        item.css({
            "left": _pos(offset.left, point.left) + "px",
            "top": _pos(offset.top, point.top) + "px"
        });
        $("#log").html("left : {{left}}, top : {{top}}".replace("{{left}}", offset.left).replace("{{top}}", offset.top));
    });

    $(document).click(function(e) {
        point.left = e.pageX;
        point.top = e.pageY;
    });

    tl.start();

})();