Bubble Engine - Plugin für jQuery

Bubble Engine sorgt für Blasen aller Art auf Websites. Und das ohne die Notwendigkeit von Adobe Flash!

jQuery Bubbles

Vorschau zu diesem Artikel

Keine Online Demo zu diesem Artikel verfügbar

Reguläre
Lizenz

5,00 €

Für eine Website
(Kommerziell und persönlich)

Sicher bezahlen mit PayPal

PayPal ist der Online-Zahlungsservice, mit dem Sie in Online-Shops sicher, einfach und schnell bezahlen – und das kostenlos.

Beschreibung

Die Bubble Engine sorgt für Seifenblasen auf deiner Website. Und das ohne die Notwendigkeit von Adobe Flash. Bubble Engine ist ein Plugin für jQuery. Es können mehrere Blasen-Quellen auf der Website erzeugt werden, welche alle ganz frei konfiguriert werden können.

 

Konfigurationsmöglichkeiten

Bubble Engine ist ein Partikel Emitter der Seifenblasen simuliert. Die Größe, das Aussehen der Grafik, die Position etc. sind dabei frei einstellbar.

  • Partikel Mindestgröße
  • Partikel Maximalgröße
  • Partikel Startposition
  • Partikel Lebzeit (Dauer der Animations)
  • Partikel Lebzeit Varianz (Dauer der Animations)
  • Partikel Streuung (X/Y)
  • Partikel Flugrichtung (rechts, links, zentriert)
  • Partikel Gewicht
  • Partikel Grafik
  • Partikel Erneuerung (on | off)

Alle Partikelquellen lassen sich per JavaScript Funktionsaufruf zur Laufzeit steuern.

  • Ändern der Konfiguration
  • Hinzufügen von Partikeln
  • Aussschalten

Einfache Integration

Du kannst zum Beispiel Seifenblasen an einer beliebigen Position deiner Website aufsteigen lassen. Die Integration ist frei konfigurierbar und kinderleicht:

Die simpelste Art Bubble Engine zu integrieren:

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         //Build Bubble Source with the Bubble Engine ------------------------
  4.         var SoapBubbleSource = $().BubbleEngine({
  5.         particleSourceX:  0,
  6.         particleSourceY:  500,
  7.         });
  8.         //Add Bubbles to Source ---------------------------------------------
  9.         SoapBubbleSource.addBubbles(50);
  10.     });
  11. </script>

Besondere Konfigurationswünsche lassen sich optional einfach hinzufügen:

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         //Build Bubble Source with the Bubble Engine ------------------------
  4.         var SoapBubbleSource = $().BubbleEngine({
  5.             particleSizeMin:            0,
  6.             particleSizeMax:            60,
  7.             particleSourceX:            0,
  8.             particleSourceY:            500,
  9.             particleAnimationDuration:  3000,
  10.             particleAnimationVariance:  2000,
  11.             particleScatteringX:        500,
  12.             particleScatteringY:        200,
  13.             particleDirection:          'right',
  14.             gravity:                    -100,
  15.             imgSource:                  'images/bubble.png',
  16.             RenewBubbles:               'on'
  17.         });
  18.         //Add Bubbles to Source ---------------------------------------------
  19.         SoapBubbleSource.addBubbles(50);
  20.     });
  21. </script>

Mehrere Instanzen gleichzeitig integrieren

Auch das ist kinderleicht, erzeugen Sie einfach mehere Instanzen, und konfigurieren Sie jede, wie Sie möchten:

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         //Build Bubble Source 1 with the Bubble Engine ------------------------
  4.         var SoapBubbleSource1 = $().BubbleEngine({
  5.             particleSourceX: 0,
  6.             particleSourceY: 500
  7.         });
  8.         //Build Bubble Source 2 with the Bubble Engine ------------------------
  9.         var SoapBubbleSource1 = $().BubbleEngine({
  10.             particleSourceX: 200,
  11.             particleSourceY: 700
  12.         });
  13.         //Add Bubbles to Source ---------------------------------------------
  14.         SoapBubbleSource1.addBubbles(50);
  15.         SoapBubbleSource2.addBubbles(50);
  16.     });
  17. </script>

Highlight: Eine Bubble Maschine mittels Bubble Engine

Diese Demo zeig, wie man mittels der Bubble Engine eine Anwendung wie zB eine Bubble Maschine erstellen kann.

  • Bubble Maschines mit Livecontrol - Konfiguriere deine Maschine zur Laufzeit
  • Erzeuge soviele Bubble Maschines wie du möchtest
  • Bewege per Dragging deine Bubble Maschines an eine beliebige Stelle
  • Ändere die Richtung (links oder rechts) deiner Bubble Maschines

Einfach die gewünschte Bubble Maschine anklicken und direkt im Control Center live steuern.

Kompatibilität geprüft in den folgenden Browsern

  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla Firefox 3
  • Google Chrome 4
  • Apple Safari 5
  • Opera 10