Einfache Implementierung der Handheld-Sperrfeuerfunktion + Textschüttel-Spezialeffektcode basierend auf JS

Vor einiger Zeit gab es auf TikTok eine Schüttelattacke, die ziemlich beliebt war, also beschloss ich, sie nachzuahmen. Schauen wir uns ohne weitere Umschweife zunächst den Effekt an …

Effektanzeige

Das GIF-Bild sieht etwas verschwommen aus, aber der eigentliche Effekt ist immer noch gut.

Auf den ersten Blick weiß ich nicht, was ich tun soll, also lassen Sie uns zunächst die zu implementierenden Funktionen aufschlüsseln.

1. Generieren Sie einen schwarzen Vollbildhintergrund, schreiben Sie Text und zentrieren Sie den Inhalt
2. Nahtloses Scrollen erreichen
3. Realisieren Sie Textverwacklungseffekte
4. Um 90 Grad drehen (horizontale Anzeige als Standard)

Der Code lautet wie folgt

.html

 <div Klasse="Sperrkasten">
  <div class="text">Untertitel schütteln</div>
 </div>

.css

.Sperrkasten {
  Breite: 100vh;
  Höhe: 100vw;
  Transform-Ursprung: 50vw 50vw;
  transformieren: drehen (90 Grad);
  Leerzeichen: Nowrap;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Hintergrundfarbe: #000;
  Überlauf: versteckt;
  Animation: aniShake 0,5 s linear unendlich;
 }

 .text {
  Breite: 100 %;
  Schriftgröße: 50px;
  Farbe: #FFF;
  Animation: aniMove 5s linear unendlich;
  Animationsfüllmodus: vorwärts;
 }

 /* Text scrollen */
 @keyframes aniMove {
  0 % { transform: translateX(100%); }
  100 % { transform: translateX(-100 %); }
 }
 
 /* Schüttelnder Untertiteleffekt*/
 @keyframes aniShake {
  0 %, 33 % { Textschatten: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
  34 %, 66 % { Textschatten: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
  67 %, 100 % { Textschatten: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
 }

An dieser Stelle wurde eine Handheld-Sperrfeuerfunktion mit Schüttel- und Scrolleffekten realisiert.

Die Funktion ist nicht kompliziert. Zuerst dachte ich daran, es mit Canvas zu zeichnen, aber im Miniprogramm befinden sich native Komponenten wie Canvas auf einem relativ hohen Niveau. Wenn ich Spezialeffekte wechseln und ein Popup-Fenster schreiben möchte, um die Konfiguration zu ändern, ist das nicht einfach. Also habe ich recherchiert und es in CSS3 geschrieben. Ich möchte nur sagen: „CSS3 ist großartig!!!“

Weitere Konfigurationseffektvorschauen im Miniprogramm

Vor kurzem habe ich ein kleines Programm erstellt und die Handheld-Sperrfeuerfunktion hinzugefügt und weitere Funktionen realisiert. Sie können Ihre konfigurierten Inhalte auch mit Freunden teilen. Alle sind herzlich eingeladen, den Code zu scannen, um ihn auszuprobieren und zu unterstützen ...

Zusammenfassung: Dies ist mein erster Blog. Ich habe den ganzen Nachmittag damit verbracht, zu löschen und auszuschneiden. Ich bin nicht sehr gut darin, Artikel zu schreiben, aber ich habe es trotzdem fertiggestellt. Schließlich müssen die Leute immer lernen, alleine erwachsen zu werden ...

Dies ist das Ende dieses Artikels darüber, wie man die Handheld-Barrage-Funktion + Textschütteln-Spezialeffektcode auf JS-Basis einfach implementiert. Weitere relevante JS-Handheld-Barrage-Textschütteln-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!