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:
- <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