根据鼠标移动移动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时，字符就会下降。

感谢adeneo和Derek

这是相关代码：

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>

Updated JSFiddle with CSS Transitions to improve smoothness

Answer 2

既然你说你想学习，我会给你一个代码来帮助你，但你必须努力通过，我还没有测试它，我只是盲目地写它，所以它很可能不起作用，但可能给你一个好的想法，必须做什么。

Html：

<div class="container">
    <div id="coolDiv" class="scatterContainer">Hello World</div>
</div>

Css：

*{margin:0;}
span:hover{
    color:#0CF;
}
.scatterContainer{
    display: inline;
}
.container {
    margin: 30px auto;
}

Javascript

LetterScatterer = (function() {

  function LetterScatterer(id) {

    this.id = id
    this.$el = $('#' + this.id);
    this.rangeOfaction = 3; // Number of characters to affect
    this.maxVerticalMovement = 10; // Value in px
    this.minVerticalMovement = 2
    this.duration = 100; // In miliseconds



    // Event Listeners

    this.$el.on(mousemove((function(_this){

        return function(e){

            var x = e.pageX;
            var y = e.pageY;

            return _this.scatter(x, y);
        }

    })(this));

  }

  LetterScatterer.prototype.splitCharacters = function() {
    var nodes = [];
    var nodesQ = 0;
    var _this = this;
    this.chars = $el.text().split('');
    $el.empty();


    for(var i = 0; i < chars.length; i++){
        var markup = "<span class='letter'>"+chars[i]+"</span>";
        nodes.push(markup);
    }

    this.$nodes = $(nodes);

    this.nodesWidth = [];
    this.$nodes.each(function(){
        var width = $(this).outerWidth();
        _this.nodesWidth.push(width);
    });

    $el.append(this.$nodes);


  }

  LetterScatterer.prototype.scatter = function(x, y) {
    var epicenter;
    var offset = 0;
    var midPoint, farestLeft;

    for(var i = 0, len = this.nodesWidth.length; i < len; i++){
        offset += this.nodesWidth[i];
        if(x <= offset){
            epicenter = i;
            break;
        }
    }

    leftRange = (this.rangeOfaction - 1) / 2; // We remove one, this is our epicenter, then we get left and right halves


    farestLeft = epicenter - leftRange;
    for(var i = farestLeft; i < this.rangeOfaction; i++){
        this.animateY($node[i]);
    }


  }


  LetterScatterer.prototype.animateY = function(node, verticalDisplacement) {
    var $node = $(node);
    $node.animate({margin-top: verticalDisplacement + 'px'}, this.duration);
  }



  return LetterScatterer;

})();

letterScatterer = new LetterScatterer('coolDiv');

您在代码中看到的是一个类函数，首先将包含将被分散的文本的元素的id传递给它。有一些配置变量，动作范围是，如果您鼠标对一个字符，多少字符向左和右(也包括当前的悬停元素)应该是动画，最大和分钟verticalMovement，决定了多少应该移动的一个是悬浮(最大)和那些进一步分开将使用min，在中间的字符应该内插，但我没有编码那么远。

然后，我们得到了一个mousemove监听器，它调用方法分散，这个方法通过将每个字符宽度相加来查找当前徘徊的项，但是现在我想一想，应该更容易将侦听器添加到span中，然后使用jQuery方法索引()获取该元素的当前索引，然后根据该索引将该项动画化。你必须创建计算旋转的代码，如果你想的话，还有x移动，但我想我给了你很多开始，我花了一段时间对它进行编码，所以我希望它能有所帮助，这个答案满足了你的问题。:)