Realistisches Feuerwerks-Spezialeffekt-Plug-in basierend auf HTML5-Canvas

Kurzes Tutorial

jquery-fireworks ist ein jQuery-Plug-in für realistische Feuerwerks-Spezialeffekte basierend auf HTML5 Canvas. Das Plugin ist einfach zu bedienen und frei konfigurierbar. Es kann realistische Feuerwerkseffekte in einem Div-Container erzeugen.

Verwendungsmethode

Fügen Sie die Dateien jquery und jquery.fireworks.js in die Seite ein.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fireworks.js"></script>

HTML-Struktur

verwendet ein

-Element als Container für Feuerwerk.

<div class="demo"></div>

Initialisierungs-Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, können Sie das Feuerwerks-Spezialeffekt-Plug-in über die fireworks()-Methode initialisieren

$('.demo').fireworks({ 
  sound: true, // 声音效果
  opacity: 0.9, 
  width: '100%', 
  height: '100%'
});

Das HTML5-Canvas-Feuerwerk. Die Github-Adresse des Spezialeffekt-Plug-Ins lautet: https://github.com/mgrigajtis/jquery-fireworks

Das Obige ist der Inhalt des realistischen Feuerwerk-Spezialeffekt-Plug-Ins. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

Verwandte Etiketten：

HTML5，canvas，烟花特效

Quelle：php.cn

Vorheriger Artikel：15 verschiedene Erscheinungsbilder von Clock-JS-Plug-Ins basierend auf Canvas Nächster Artikel：18 Arten von Textanimations-Spezialeffekten basierend auf anime.js

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf
  2023-03-15 16:54:01
• Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen
  2023-03-15 12:26:02
• Einführung in den Empfang von E-Mails in IMAP in PHP
  2023-03-14 18:58:01
• Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP
  2023-03-14 11:30:01
• Zusammenfassung der Verwendung aller Attribute des -Tags in HTML
  1970-01-01 08:00:00
• Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)
  2023-03-16 15:20:01
• Einführung in die Verwendung von typeof in JavaScript
  1970-01-01 08:00:00
• Einführung in die Verwendung der Bestätigungsmethode () in JavaScript
  1970-01-01 08:00:00
• Eine detaillierte Einführung in das HTML5-Platzhalterattribut
  1970-01-01 08:00:00
• So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS
  1970-01-01 08:00:00

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2348

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2478

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2099

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1979

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

2049

verwandte Themen

Mehr>

• Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
• Der Unterschied zwischen HTML und HTML5
• Welche Software gibt es zum Erlernen von Python?
• Lösung für Socket-Fehler 10054
• So verlangsamen Sie Videos auf Douyin
• Der Unterschied zwischen * und & in der C-Sprache
• So verwenden Sie mmplayer
• Was ist der Python-Bereich?