根据鼠标移动移动div的每个字符

Question

我正在开发一个网站,我不知道如何创建一个如下所示的javascript动画:

我有一个div文本,当用户将鼠标移到这个文本上时,我希望每个角色彼此独立移动,以便与它保持一定的距离(鼠标).此外,我希望这个动画有旋转,但现在并不重要.这是一个图像说明:

这是我到目前为止所做的:

HTML:

<div class="div1">Hello World</div>

使用Javascript:

var chars = $(".div1").html().split('');
$(".div1").empty();
for(var i = 0; i < chars.length; i++){
    $(".div1").append("<span class='letter'>"+chars[i]+"</span>");
}

的jsfiddle

---

有人能帮我实现这个效果吗？我不知道如何继续,没有帮助我的网站或答案.您可以使用jQuery或纯JavaScript,但请保持简单!谢谢.

Answer 1

哦，我们走了，我已经找到了解决方案。

我所做的是为每个字符使用不同的类名（.letter+字符编号），然后创建一种根据鼠标位置和与每个字符相比的距离来移动字符的方法，例如，当鼠标和字符之间的距离一个字符小于X，鼠标Y小于该字符Y，则该字符会向下移动。

感谢阿德内奥和德里克

这是相关代码：

JavaScript：

var chars = $(".div1").html().split('');
$(".div1").empty();
for (var i = 0; i < chars.length; i++) {
    $(".div1").append("<span class='letter" + i + "'>" + chars[i] + "</span>");
    $(".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：

<div class="div1">Hello World</div>

使用 CSS Transitions 更新了 JSFiddle 以提高平滑度