Dieter Petereit 17. Oktober 2017

Bubbly Backgrounds: Bewegte Hintergründe für deine Website

Bewegen muss es sich, sonst ist es nicht modern. Das gilt natürlich auch für den Hintergrund deiner Website. Bubbly Backgrounds ist zu deinen Diensten.

JavaScript für Blubberbläschen

Bubbly Backgrounds ist ein sehr kleines JavaScript aus der Feder des norwegischen Entwicklers, der sich auf Github Tipsy nennt und mit Vornamen David heißt. MIt komprimierten 696 Bytes überlastet das kleine Script keine Website, sorgt aber für ordentlich Bewegung, wie das folgende Preview-GIF zeigt:

Fast schon meditativ mutet es an, den kreisrunden Bläschen, die Bubbly Backgrounds produziert, bei ihrem Streifzug durch den farbigen Seitenhintergrund zuzusehen. Schnell noch aufs Ein- und Ausatmen konzentriert und die Entspannung kann einsetzen.

Einsatz mit zwei Zeilen

Spaß beiseite. Wenn du auf der Suche nach diesem modischen Accessoire für Websites bist, kannst du dich zurücklehnen und Tipsys JavaScript einsetzen. Angenommen du wolltest eine Seite erstellen, die ausschließlich aus dem blubbernden Hintergrund besteht, dann sähe dein HTML so aus:

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

Zum Beispiel über ein CDN ziehst du das JavaScript in dein Projekt und startest es mit dem Aufruf bubbly();. Bubbly erstellt ein Canvas-Element, dass dem Body-Tag zugeordnet wird. Der Canvas nimmt stets den kompletten Viewport ein. Insofern gibt es da nichts weiter zu frickeln. Verwende einfach die eben gezeigten Schnipsel in deinem Projekt und fertig.

Mehr Möglichkeiten per Parameter

Tust du das, erhältst du allerdings nur einen blauen Hintergrund, auf dem sich weiß, aber durch die Überlagerung blassblaue Blasen tummeln. Weil das nicht jedermann gefallen könnte, hat Tipsy einige Parameter vorgesehen, mit deren Hilfe du den Hintergrund nebst Blasen auf deine Vorstellungen anpassen kannst.

Drei solcher Beispiele liefert Tipsy direkt mit. Da kommt jeder Farbgeschmack zur Geltung:

Da es sich im Wesentlichen um Farbangaben und mathematische Parameter handelt, solltest du ein wenig mit den Optionen spielen, um deinen ganz eigenen blubbernden Hintergrund zu kreiieren.

Open Source und kostenlos

Auf der Github-Seite zum Projekt findest du die erforderlichen Code-Snippets etwas lesbarer, als sie im eben gezeigten Screenshot zu sehen sind. An dieser Stelle kannst du das JavaScript herunterladen, wenn du es nicht via Node oder CDN einbinden willst.

Live-Demos der vier Beispiele findest du hier.

Bubbly Backgrounds wird unter der liberalen Apache-Lizenz 2.0 vertrieben, die die kostenlose Verwendung und Veränderung des Ursprungsmaterials auch zu kommerziellen Zwecken erlaubt, solange die Copyright-Vermerke nebst Lizenzangaben nicht aus dem Quellcode entfernt werden.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück