Déplacez chaque personnage d'un div basé sur le mouvement de la souris

Oh, nous allons, j'ai trouvé une solution pour cela.

Ce que j'ai fait était d'utiliser un nom de classe différent pour chaque personnage ( .letter + numéro de personnage), puis créé une façon de déplacer les caractères en fonction de la position et de la distance de la souris par rapport à chaque caractère, par exemple lorsque la distance entre les La souris et un caractère est inférieur à X, et la souris Y est inférieure au caractère Y , alors le personnage descendra.

Merci à Adeneo et à Derek

Voici le code pertinent:

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> 

Mise à jour JSFiddle avec CSS Transitions pour améliorer la douceur

Bien que vous dites que vous voulez apprendre, je vais donner un code pour vous aider, mais vous devez parcourir votre chemin, je ne l'ai pas testé, je l'ai simplement écrit aveuglément, de sorte qu'il ne fonctionne pas correctement mais pourrait Vous donner une bonne idée de ce qu'il faut faire.

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'); 

Ce que vous voyez dans le code est une fonction de type classique, d'abord vous passez l'id de l'élément contenant le texte qui sera dispersé. Il existe des paramètres de configuration, la gamme d'action permet de dire, si vous utilisez une souris sur un personnage, combien de caractères à gauche et à droite (y compris l'élément plané actuel) doivent être animés, le mouvement vertical maximal et min. Détermine comment Beaucoup devrait déplacer celui qui est flotté (max) et ceux qui sont plus éloignés utilisent le min, ceux entre les deux devraient interpoler, mais je n'ai pas codé jusqu'à ce point.

Nous avons alors un auditeur mousemove, qui appelle la méthode de dispersion, cette méthode trouve quels éléments est actuellement plané en ajoutant chaque widht caractères, mais maintenant je pense à ce sujet, il devrait être plus facile d'ajouter un auditeur à la portée et obtenir L'indice actuel de cet élément avec l'index de la méthode jQuery (), puis, en fonction de cet index, vous l'animez et ceux de la gamme. Vous devez créer le code qui calcule la rotation et le mouvement x si vous le souhaitez, mais je pense que je vous ai beaucoup donné pour commencer, cela m'a pris un moment pour le coder, alors j'espère que cela vous aidera et cette réponse répond à votre question. 🙂