JSFiddle - React, Tailwind, and code Playground

by fezec

HTML

<p>This is a message going out to This is a message going out toThis is a message going out toThis is a message going out toThis is a message going out toThis is a message going out toThis is a message going out toThis is a message going out toThis is a message going out toThis is a message going out to <span id="test">EDIE</span> Tron</p>

CSS

body{
    overflow:hidden;
}

p{
 border:1px solid black;   
}

span{
    position:relative;
    top:0;
    left:0;
    margin:0;
}

JavaScript

var a = 7
var span = $("#test");
var theta = .1;
var time = 10;
var ang = 0
$(document).bind("mousemove", function(e) {

    // time=e.clientX/$(this).width()*10;


});

function updateAng() {


    if (ang > 360) {
        ang = 0;
    } else {
        ang += .1;
    }


    if (time > 0) {
        time -= .1;

    } else {
        time = 0
    }
    var posX = 0 + Math.cos(ang) * a * time;
    var posY = 0 + Math.sin(ang) * a * time;

    
        
    span.css({
        left: posX + "px",
        top: posY + "px"
    });
}

setInterval(updateAng, 30);