Translation is running! Please wait...

Bubble Engine - Plugin für jQuery

Bubble Engine - Plugin für jQuery

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.

tl_files/images/btn-demo.pngtl_files/images/btn-download.png

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:

<script type="text/javascript">
  $(document).ready(function() {
    //Build Bubble Source with the Bubble Engine ------------------------
    var SoapBubbleSource = $().BubbleEngine({
    particleSourceX:  0,
    particleSourceY:  500,
    });
    //Add Bubbles to Source ---------------------------------------------
    SoapBubbleSource.addBubbles(50);
  });
</script>

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

<script type="text/javascript">
  $(document).ready(function() {
    //Build Bubble Source with the Bubble Engine ------------------------
    var SoapBubbleSource = $().BubbleEngine({
      particleSizeMin:            0,
      particleSizeMax:            60,
      particleSourceX:            0,
      particleSourceY:            500,
      particleAnimationDuration:  3000,
      particleAnimationVariance:  2000,
      particleScatteringX:        500,
      particleScatteringY:        200,
      particleDirection:          'right',
      gravity:                    -100,
      imgSource:                  'images/bubble.png',
      RenewBubbles:               'on'
    });
    //Add Bubbles to Source ---------------------------------------------
    SoapBubbleSource.addBubbles(50);
  });
</script>

Mehrere Instanzen gleichzeitig integrieren

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

<script type="text/javascript">
  $(document).ready(function() {
    //Build Bubble Source 1 with the Bubble Engine ------------------------
    var SoapBubbleSource1 = $().BubbleEngine({
      particleSourceX: 0,
      particleSourceY: 500
    });
    //Build Bubble Source 2 with the Bubble Engine ------------------------
    var SoapBubbleSource1 = $().BubbleEngine({
      particleSourceX: 200,
      particleSourceY: 700
    });
    //Add Bubbles to Source ---------------------------------------------
    SoapBubbleSource1.addBubbles(50);
    SoapBubbleSource2.addBubbles(50);
  });
</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

Download

Der Download ist völlig kostenlos. Er enthält alle benötigten Dateien sowie eine Demo-Datei. Diese Version basiert auf jQuery (v1.4.2)

Aktuelle Version:

» Bubble Engine (v1.0) jetzt downloaden

Kritik und Lob! Sag's und hinterlasse ein Kommentar:

Kommentar von thangdc | 2010-08-23

Very good, I love it :D

Kommentar von Plugo | 2010-08-02

Well done. I love this plugin. Looking forward to implementation in some new project.

Kommentar von Beben | 2010-07-21

wow...so funky dude
thanks for tutor

Kommentar von steve | 2010-07-20

Nice! and I like how you can use it for MORE than just bubbles!

for instance, you could use it to show the rate of user comments, hits on a website, travellers going through turnstile, an easy visual graphing tool -GREAT!

Kommentar von Michael | 2010-07-19

Simply superb!
Thanks a lot for sharing!

Kommentar von Simon | 2010-07-15

Ziemlich sinnloses Plugin, sieht aber trotzdem toll aus ;)

 

Antwort von SOYOS: Stimmt auf den ersten Blick :-) Vielleicht hat der ein oder andere aber genau so einen Partikel Ermitter gesucht.

Kommentar von Jireck | 2010-07-15

C'Est Enorme Bravo! C'EST aussi innovant