根据鼠标移动移动div的每个字符 [英] Move each character of a div based on mouse movement

问题描述

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

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

我有一个 div 上面有一些文字，当用户将鼠标移到这个文本上时，我希望每个角色彼此独立移动，以保持一定的与它的距离（鼠标）。此外，我希望这个动画有旋转，但现在并不重要。这是一个图像说明：

I have a div that have some text on it, and when the user moves his mouse over this text, I want each character to move independently of each other, in order to maintain a certain distance from it (the mouse). Also, I want this animation to have rotation, but it isn't that important now. Here's an image explanation:

以下是我到目前为止所做的事情：

HTML：

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

Javascript：

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，但是，保持简单！谢谢。

Can someone help me to achieve this effect? I don't know how to proceed and there's no site or answer that helped me. You can use jQuery or pure JavaScript but, please, keep it simple! Thank you.

推荐答案

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

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

我所做的是为每个角色使用不同的类名（ .letter +字符编号）然后根据鼠标位置和距离创建一种移动字符的方式，与每个字符相比，例如，鼠标之间的距离并且一个字符小于X，并且鼠标 Y 小于字符 Y ，那么该字符将会出现

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.

感谢 adeneo 和德里克

以下是相关代码：

JavaScript：

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转换更新了JSFiddle以提高平滑度

这篇关于根据鼠标移动移动div的每个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！