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>></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>></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> 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>></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> 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>></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!