Text mit blast.js animieren

HTML -Elemente mit CSS oder JavaScript sind heute dank der Hilfe von Bibliotheken mehr oder weniger eine leichte Aufgabe. Sie können jedoch nur die vollständigen vorhandenen Elemente animieren.

Dies bedeutet, dass Sie das Wort in ein einzelnes Element (wie eine Spanne) einwickeln und dann entsprechend finden müssen, wenn Sie ein einzelnes Wort in einem Absatz animieren möchten.

Wenn Sie nur ein oder zwei Spannelemente wie dieses haben, ist dies kein großes Problem, aber was ist, wenn Sie jeden Charakter in einem Absatz animieren möchten? Für jeden Charakter müssen Sie eine Spannweite erstellen, die viel zusätzliches Markup hinzufügt und den Text schwer zu bearbeiten macht. Deshalb existiert Blast.js.

Schlüsselpunkte

• blast.js ist ein JQuery -Plugin, mit dem einzelne Zeichen, Wörter oder Sätze in HTML animieren können. Dies geschieht, indem der ausgewählte Text in ein einzelnes Element (z. B. eine Spanne) und dann diese Elemente animiert.
• Das Plugin bietet viele Anpassungsoptionen, einschließlich der Möglichkeit, Wickelelemente auszuwählen, zu suchen und bestimmte Wörter oder Phrasen hervorzuheben und die Geschwindigkeit und den Stil von Animationen zu steuern. Es stellt auch sicher, dass vorhandene Elemente im Text nicht entfernt oder beschädigt werden.
• Während blast.js leistungsstark ist, brauchen nicht alle Benutzer es, insbesondere diejenigen, die keinen animierten Text benötigen. Für diejenigen, die animierter Text benötigen, kann dies jedoch ein leistungsstarkes Tool zum Hinzufügen von dynamischen und interaktiven Elementen zu Webseiten sein.

Was ist Blast.js?

blast.js ist ein JQuery -Plugin, mit dem Sie einzelne Zeichen, Wörter oder Sätze animieren können. In diesem Artikel werde ich einige Beispiele angeben, damit Sie verstehen können, wie Sie Blast.js verwenden. Um Blast.js zu verwenden und das folgende Beispiel auszuprobieren, benötigen Sie JQuery sowie die BLAST.JS -Datei, die auf der Projekt -Website von Blast.js zu finden ist.

Wie bereits erwähnt, ermöglicht Blast.js uns, Elemente um Zeichen, Wörter oder Sätze zu erstellen, aber die Bibliothek ist nicht auf diese Optionen beschränkt. Im nächsten Abschnitt sehen wir einige spezifische Beispiele, um einige Optionen einzuführen. Die Liste der Optionen, die wir sehen werden, ist nicht erschöpfend.

Animieren Sie unseren ersten Text

In diesem ersten Beispiel werden wir einen Titel animieren und sie durch Charakter auf den richtigen Charakter bringen. Der einzige erforderliche HTML -Code ist wie folgt:

<h1 id="">></h1>Hello World!>

Nachdem Jquery und Blast.js einbezogen werden, befindet sich das nächste Code in diesem Abschnitt in einer benutzerdefinierten JavaScript -Datei in JQuery's Ready Handler, um sicherzustellen, dass die Seite fertig ist:

$(function() {
  // 动画代码
});

Jetzt können wir unseren Titel animieren. In unserem Beispiel würde die Verwendung von $ ('H1') zur Lokalisierung des Elements ausreichen, aber in Ihrem Fall würden Sie einen geeigneten Selektor verwenden, um das Element zu lokalisieren.

blast.js bietet eine neue Methode im Jquery -Objekt: .blast (), das einen Parameter akzeptiert: ein Objekt, das alle Optionen auflistet, die Sie verwenden möchten. In diesem ersten Beispiel verwenden wir nur einen Option Gremiter: 'Charakter', was darauf hinweist, dass wir unseren Titelcharakter nach Charakter animieren möchten.

Wenn wir den Parameter nicht angeben, wird der Standardwert 'Wort' (anstatt "Zeichen" verwendet, sodass er um jedes Wort (nicht jedes Zeichen, wie wir es hier wollen) eine Span.

<h1 id="">></h1>Hello World!>

Auf diese Weise wird unser einfaches H1 -Element animiert und das folgende DOM wird generiert:

$(function() {
  // 动画代码
});

Beachten Sie, dass Räume zwischen Wörtern erhalten bleiben und nicht in die Spannweite eingekapselt sind.

Jetzt müssen wir das generierte Spannelement abrufen. Zum Beispiel könnten Sie $ ('. Blast') probieren, aber es gibt einen einfacheren Weg. Standardmäßig gibt die Methode .blast () die generierten Elemente zurück, sodass Sie sie nur in einer Variablen speichern müssen, um diese Elemente abzurufen.

$('h1').blast({
  delimiter: 'character'
});

Es ist nützlich, die generierten Elemente zu erhalten, aber nicht immer. Wenn Sie also möchten, dass die Methode .blast () das übergeordnete Element (das Hauptelement, das Sie animieren) anstelle des generierten Elements zurückgeben, können Sie eine andere Option verwenden: returnGenerated. Standardmäßig ist es auf TRUE festgelegt und Sie werden Ihr übergeordnetes Element:

haben:

<h1 id="class-blast-root"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

Kehren wir zu unserem Beispiel zurück, um die Elemente zu belasten, die wir sammeln. Wir werden die Methode von JQuery von () () verwenden, um jeden Charakter -Charakter nach Charakter zu animieren.

Die Methode

.each () führt eine Funktion für jedes im JQuery -Objekt gespeicherte Element aus. Das Folgende sind die Funktionen, die wir verwenden werden, erklärt in den Kommentaren.

var chars = $('h1').blast({
  delimiter: 'character'
});

Code Erläuterung: Erstens verwenden wir $ (this), um das aktuelle Element abzurufen (in diesem Fall das aktuelle Zeichen). Wir initialisieren seine relative Position auf Null und schließlich animieren wir diese Position.

Wie in den entsprechenden Kommentaren im Code gezeigt, startet die Methode .Delay () die Animation nach der definierten Anzahl von Millisekunden unter Verwendung von i * 45, wobei ich der von JQuery bereitgestellte Zähler ist (wir haben es als Parameter übergeben) . Für den ersten Charakter bin ich gleich 0, sodass die Animation sofort beginnt, dann ist es gleich 1, der zweite Charakter ist nach 45 Millisekunden animiert und so weiter.

Unsere Animation ist fertig und kann ausgeführt werden! Sie können es im Live -Beispiel unten anzeigen.

Wählen Sie Ihr Verpackungselement

aus Standardmäßig wird ein Spannelement erstellt, was normalerweise das ist, was wir wollen. Aber manchmal wollen wir andere Elemente wie Stark, EM und sogar Div und p verwenden. Mit Blast.js ist dies möglich.

Um dies zu tun, erstellen wir in unserem nächsten Beispiel einen Absatz, in dem jedes Wort mit zufälligen Farben gestylt und im EM -Element eingekapselt wird.

Erstens benötigen wir eine Funktion, um uns eine Zufallszahl zu geben. Wir werden die modifizierte Version von Math.random () verwenden, die in nativem JavaScript verfügbar ist.

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

Diese neue Funktion gibt uns zufällige Ganzzahlen zwischen Min und Max, die als Argumente in die Funktion übergeben werden.

Jetzt sind wir bereit, unsere Absätze zu färben. Zunächst verwenden wir ein Trennzeichen 'Wort', um unsere Absätze zu animieren. Wir haben eine neue Option hinzugefügt: Tag, mit der wir die Tags angeben, von denen wir Blast.js verwenden sollen, um Elemente zu generieren. Wir setzen es auf 'em' anstelle der Standardspannung.

<h1 id="">></h1>Hello World!>

Jetzt sind alle unsere Wörter im EM -Tag verkapselt. Für jedes Tag verwenden wir die .css () -Methode von JQuery und unsere benutzerdefinierte Rand () -Funktion, um eine neue Farbe zu definieren:

$(function() {
  // 动画代码
});

Als nächstes werden wir eine weitere Codezeile hinzufügen, um zu erklären, wie Sie den Ausgangszustand des übergeordneten Elements abrufen (d. H. Wie Sie alle diese extra generierten Tags entfernen).

Um dies zu tun, können Sie der Methode .blast () einen falschen Wert zuweisen. Dies gibt an, dass BLACK.JS alle Tags, die durch diese Methode mit dieser Methode hinzugefügt wurden, entfernt werden.

Sie können dieses Beispiel in der Live -Version unten anzeigen. Versuchen Sie, eines der vorhandenen Wörter auf der Seite anzuzeigen, um den Effekt anzuzeigen.

Suche mit Blast.js

standardmäßig erstellt Blast.js Elemente um jedes Wort, jedes Zeichen oder jeden Satz im Text. Sie können aber auch nur ein Wort oder eine Gruppe von Wörtern finden: Blast.js und dann jedes Aussehen des Wortes oder die Phrase in ein Element zusammenfassen. Dazu verwenden wir die Suchoption, deren Wert eine Zeichenfolge ist, nicht die Option Trennzeichen.

Für die Demonstration erstellen wir ein Formular mit Eingabetasten und Senden von Schaltflächen. Der Benutzer gibt das Wort in der Eingabe an, nach der in einem bestimmten Absatz gesucht werden soll, und dann wird BLAST.js die gesuchten Begriffe in das Span -Element zusammenfassen.

$('h1').blast({
  delimiter: 'character'
});

Wir werden dies mit dem Submit -Ereignis auf dem Formular tun.

<h1 id="class-blast-root"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

Die

-Richtlinie E.PreventDefault () wird verwendet, um das Standardverhalten eines Formulars zu deaktivieren, dh ein Formular eingereicht.

Wir verwenden den richtigen Selektor, um unsere Absätze abzurufen, bevor die Methode .blast () zum ersten Mal mit dem falschen Wert angewendet wird. Wenn der Benutzer zuvor andere Suchanfragen durchgeführt hat, werden diese Suchanfragen gelöscht.

Als nächstes verwenden wir die .blast () -Methode erneut, diesmal der für die Suche erforderliche Begriff. Dazu verwenden wir die Suchoption, um sie mit dem Eingabwert bereitzustellen. Die beiden anderen Optionen sind nicht obligatorisch, aber ich hoffe, Ihnen ihre Existenz zu zeigen.

Mit der Option

benutzerdefinierte Klasse können wir den generierten Elementen unsere eigenen Klassennamen hinzufügen. Wenn Sie sich die im vorherigen Beispiel erzeugten Elemente angesehen haben, werden Sie auf jeden Fall sehen, dass sie alle die Explosionsklasse haben. Mit CustomClass können Sie einen oder mehrere Klassen hinzufügen.

Die Option

generateIndexid ist ein boolescher Wert. Auf true gesetzt, fügt es jedem generierten Element eine ID hinzu. Um zu arbeiten, erfordert die Option CustomClass. Hier wählen wir die Klassensuche aus, sodass das erste generierte Element ID-Such-1, das zweite Element für Such-2 usw. hat.

Um unser Beispiel nützlich zu machen, müssen wir einige Regeln in CSS hinzufügen, um die erzeugten Elemente hervorzuheben. Sie können beispielsweise die folgenden Regeln anwenden.

var chars = $('h1').blast({
  delimiter: 'character'
});

Sie können dieses Beispiel in der Live -Version unten anzeigen. Versuchen Sie, eines der vorhandenen Wörter auf der Seite anzuzeigen, um den Effekt anzuzeigen.

Was ist mit den vorhandenen Elementen?

Nachdem wir verstanden haben, wie Blast.js funktioniert, gibt es jetzt eine wichtige Frage zu beantworten. Was ist, wenn dieser Container neben dem Textknoten die .blast () -Methode auf den Container anwenden? Was ist beispielsweise, wenn wir die Explosion auf den folgenden Absatz angewendet haben?

<h1 id="">></h1>Hello World!>

blast.js zerstört Ihren Dom -Baum nicht. In diesem Fall wird das vorhandene Span -Element nicht entfernt und ein neues Span -Element (mit der Explosionsklasse) erstellt. Durch die Ausführung von $ ('P'). Blast () im obigen Absatz generieren wir das folgende Ergebnis:

$(function() {
  // 动画代码
});

Zuletzt: Was ist, wenn dieses vorhandene Span -Element tatsächlich ein von Blast.js generiertes Span -Element ist? Die Antwort hängt davon ab, was Sie tun möchten.

Angenommen, wir wenden die .blast () -Methode in einen Absatz an und setzen die Deklimiteroption auf "Word". Wenn wir dieselbe Methode erneut anwenden, wird das zuvor generierte Element entfernt, bevor ein neues Element erstellt wird, auch wenn dieselben gilt für neue Anrufe, um Sekunden anstelle von Separatoren zu verwenden.

Wenn Sie jedoch nach einem Begriff suchen und die Methode .blast () erneut aufrufen, um nach einem neuen Begriff zu suchen, wird die alte Suche nicht entfernt. Versuchen Sie im letzten Beispiel in unserem vorherigen Abschnitt, den Aufruf von .blast (falsch) zu entfernen. In diesem Fall wird die neue Suche hervorgehoben, aber die alte Suche bleibt auch hervorgehoben.

Wie auch immer

blast.js ist für alle nicht nützlich, und einige mögen es für völlig unnötig halten. Wenn Sie jedoch Text animieren möchten, ist dies wahrscheinlich eine der besten Optionen, die Sie finden können.

Wie oben erwähnt, finden Sie andere Optionen, um die generierten Elemente anzupassen. Sie können sogar wählen, ob Sie das Aria -Eigentum deaktivieren möchten.

Wenn Sie Ideen haben, wie Sie es kreativ verwenden oder diese oder andere Tools verwendet haben, um Text zu animieren, können Sie uns in der Diskussion wissen.

FAQs (FAQ) auf dem Animationstext mit BLAST.JS

Wie installiere ich Blast.js in meinem Projekt?

Um Blast.js in Ihrem Projekt zu installieren, können Sie NPM oder Bower verwenden. Wenn Sie NPM verwenden, können Sie es installieren, indem Sie den Befehl npm installieren. Wenn Sie Bower verwenden, ist der Befehl Bower Install Installation Blast-Text. Nach der Installation können Sie das Skript -Tag verwenden, um es in Ihre HTML -Datei aufzunehmen. Denken Sie daran, JQuery vor Blast.js einzubeziehen, da es sich um ein JQuery -Plugin handelt.

Was sind die verschiedenen Separatoren in Blast.js?

blast.js liefert vier verschiedene Grenzwerte: Zeichen, Wort, Satz und Element. Der Charakter -Separator unterteilt den Text in ein einzelnes Zeichen. Das Wort Separator unterteilt den Text in Wörter. Der Satzabscheider unterteilt den Text in Sätze. Das Element -Separator unterteilt den Text in HTML -Elemente.

Wie kann man Blast.js verwenden, um Text zu animieren?

Um Blast.js zum Animieren von Text zu verwenden, müssen Sie zunächst JQuery verwenden, um den animierten Text auszuwählen. Sie können dann die .blast () -Methode verwenden, um den Text in Fragmente zu unterteilen. Danach können Sie CSS oder JQuery verwenden, um diese Clips zu animieren.

Kann ich blast.js ohne jQuery verwenden?

nein, Blast.js ist ein JQuery -Plugin, daher muss JQuery arbeiten. Sie müssen JQuery in Ihr Projekt einbeziehen, bevor Sie BLAST.JS einbeziehen.

Wie benutze ich benutzerdefinierte Grenzwerte in Blast.js?

Um einen benutzerdefinierten Trennzeichen in Blast.js zu verwenden, können Sie einen regulären Ausdruck an die .blast () -Methode übergeben. Der reguläre Ausdruck sollte mit den Zeichen übereinstimmen, die Sie als Trennzeichen verwenden möchten.

Warum funktioniert meine Blast.js -Animation nicht?

Wenn Ihre Explosionsanimation nicht funktioniert, gibt es möglicherweise mehrere Gründe. Stellen Sie zunächst sicher, dass Sie Jquery und Blast.js in Ihr Projekt einbeziehen. Zweitens prüfen Sie, ob Sie die .blast () -Methode korrekt verwenden. Drittens prüfen Sie, ob Ihr CSS- oder JQuery -Animationscode korrekt ist.

Kann ich Blast.js verwenden, um HTML -Elemente zu animieren?

Ja, Sie können Blast.js verwenden, um HTML -Elemente zu animieren. Sie können das Element -Separator verwenden, um HTML in einzelne Elemente zu zerlegen und dann CSS oder JQuery zu verwenden, um sie zu animieren.

Wie kann man die Geschwindigkeit von Blast.js -Animation steuern?

Die Geschwindigkeit von Blast.js -Animation wird durch CSS- oder JQuery -Animationscode gesteuert, nicht von Blast.js selbst. Sie können die Geschwindigkeit anpassen, indem Sie den Dauerparameter im Animationscode ändern.

Kann ich Blast.js mit anderen JavaScript -Bibliotheken verwenden?

Ja, Sie können Blast.js mit anderen JavaScript -Bibliotheken verwenden. Da Blast.js jedoch ein JQuery -Plugin ist, müssen Sie JQuery in Ihr Projekt aufnehmen.

Wie entfernen Sie den Effekt von Blast.js aus meinem Text?

Um den Effekt von Blast.js aus Ihrem Text zu entfernen, können Sie die Methode .Unblast () verwenden. Diese Methode stellt den Text in seinen ursprünglichen Zustand wieder her und beseitigt alle Blast.js -Effekte.

Das obige ist der detaillierte Inhalt vonText mit blast.js animieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!