Move each character of a div based on mouse movement

Question

I\'m developing a site and I don\'t know how to create a javascript animation that looks like this:

I have a div that have some text on it, and when the use

Answer 1

Oh here we go, I've found a solution for this.

What I did was using a different class name for each character (.letter + character number) and then created a way of moving the characters depending on the mouse position and distance compared to each character, so, for example, when the distance between the mouse and a character is less than X, and the mouse Y is less than the character Y, then the character will go down.

Thanks to adeneo and Derek

Here's the relevant code:

JavaScript:

var chars = $(".div1").html().split('');
$(".div1").empty();
for (var i = 0; i < chars.length; i++) {
    $(".div1").append("" + chars[i] + "");
    $(".letter" + i).css({
        "position":"relative",
    });
    $(".letter" + i).css({
        "transition": "0.5s"
    });
}

$(document).on("mousemove", function (e) {
    for (var i = 0; i < chars.length; i++) {
        var x = e.pageX,
            y = e.pageY;
        var distx = x - $(".letter" + i).offset().left + ($(".letter" + i).width() / 2);
        var disty = y - $(".letter" + i).offset().top;

    if (Math.abs(distx) < 24 && Math.abs(disty) < 24) {
        if (distx > 6 || distx < -6) {
            if (x < $(".letter" + i).offset().left) {
                $(".letter" + i).css({
                    "left": + (24 / Math.abs(distx) * Math.abs(distx)),
                        "position": "relative"
                });
            } else {
                $(".letter" + i).css({
                    "left": - (24 / Math.abs(distx) * Math.abs(distx)),
                        "position": "relative"
                });
            }
        }

        if (disty > 12 || disty < -12) {
            if (y < $(".letter" + i).offset().top + 6) {
                $(".letter" + i).css({
                    "top": + (24 / Math.abs(disty) * Math.abs(disty)),
                        "position": "relative"
                });
            } else {
                $(".letter" + i).css({
                    "top":  - (24 / Math.abs(disty) * Math.abs(disty)),
                        "position": "relative"
                });
            }
        }
    }
    distx = 0;
    disty = 0;
}

});

HTML:

Hello World

Updated JSFiddle with CSS Transitions to improve smoothness