Verschiebe jedes Zeichen eines Div basierend auf der Mausbewegung
Ich entwickle eine Website und ich weiß nicht, wie man eine Javascript-Animation erstellt, die so aussieht:
Ich habe eine div , die Text enthält, und wenn der Benutzer seine Maus über diesen Text bewegt, möchte ich, dass sich jedes Zeichen unabhängig voneinander bewegt, um a zu erhalten bestimmte Entfernung von ihm (die Maus). Außerdem möchte ich, dass diese Animation eine Rotation hat, aber das ist jetzt nicht so wichtig. Hier ist eine Bildbeschreibung:
Folgendes habe ich bisher gemacht:
HTML:
%Vor%Javascript:
%Vor%Kann mir jemand helfen, diesen Effekt zu erzielen? Ich weiß nicht, wie ich vorgehen soll und es gibt keine Website oder Antwort, die mir geholfen hat. Sie können jQuery oder reines JavaScript verwenden, aber halten Sie es einfach! Danke.
2 Antworten
Oh, hier sind wir, ich habe eine Lösung dafür gefunden.
Was ich getan habe, war die Verwendung eines anderen Klassennamens für jedes Zeichen ( .letter + Zeichennummer) und dann eine Möglichkeit, die Zeichen abhängig von der Mausposition und Entfernung zu jedem Zeichen zu verschieben, also zum Beispiel wann der Abstand zwischen der Maus und einem Zeichen ist kleiner als X, und die Maus Y ist kleiner als das Zeichen Y , dann wird das Zeichen untergehen.
Hier ist der relevante Code:
JavaScript:
%Vor%});
HTML:
%Vor%JSFiddle mit CSS-Übergängen aktualisiert, um die Übersichtlichkeit zu verbessern
Nun, da du sagst, dass du lernen willst, gebe ich einen Code, der dir hilft, aber du musst dich durcharbeiten, ich habe es nicht getestet, ich habe es nur blind geschrieben, also wird es wahrscheinlich nicht funktionieren Arbeit, aber könnte Ihnen eine gute Vorstellung davon geben, was getan werden muss.
Html:
%Vor%Css:
%Vor%Javascript
%Vor%Was Sie im Code sehen, ist eine klassenähnliche Funktion. Zuerst übergeben Sie ihm die ID des Elements, das den Text enthält, der gestreut wird. Es gibt einige Konfigurationsmöglichkeiten, Aktionsbereich ist beispielsweise, wenn Sie die Maus über ein Zeichen bewegen, wie viele Zeichen links und rechts (einschließlich des aktuellen Elements hovered) animiert werden sollen, wie die max und min verticalMovement, wie viel sollte den bewegen, der schwebt (max) und diejenigen, die weiter voneinander entfernt sind, benutzen min, die dazwischen sollten interpolieren, aber ich habe nicht so weit programmiert.
Wir haben dann einen mousemove-Listener, der die Methode scatter aufruft, diese Methode findet, welche Elemente momentan schweben, indem wir jedes Zeichen width addieren, aber jetzt denke ich darüber nach, es sollte einfacher sein, einen Listener zum Bereich hinzuzufügen , und rufen Sie den aktuellen Index dieses Elements mit der jQuery-Methode index () ab, und basierend auf diesem Index animieren Sie diesen und jene im Bereich. Sie müssen den Code erstellen, der die Rotation berechnet, und X-Bewegung, wenn Sie möchten, aber ich denke, ich gab Ihnen viel zu starten, dauerte es eine Weile, um es zu codieren, so hoffe ich, es hilft und diese Antwort Ihre Frage erfüllt. :)
Tags und Links javascript jquery html5