Bewegte Hintergrundbilder für die Website

Facebook
XING
Twitter
LinkedIn
Bewegen muss es sich, sonst ist es nicht modern. Das gilt natürlich auch für den Hintergrund deiner Website.

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.

Weitere animierte Websiten-Hintergründe

Obligatory Falling Snow

Fireflies

Fireflies

Rymd

Color Changing

Pattern Animation (Infinite)

Pure CSS Animated Background

Sunrise

Triangles Animation

Statische Hintergrundbilder im SVG-Format

Ebenso nützlich ist die Seite Hero-Patterns, auf welcher es eine Vielzahl von herunterladbaren, skalierbaren Hintergrund- und Hero-Images gibt. Die Farben kann man individuell anpassen und zum Schluss wird noch das passende CSS ausgegeben. Zum Beispiel sieht das CSS zu „Graph Paper“ so aus.

background-color: #fefefe;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c3c3c3' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

Viel Spaß mit all den fantastischen Hintergrundbildern wünschen wir!

Teilen macht Freude:

Facebook
LinkedIn
Twitter
XING

2 Antworten

  1. Also wenn man der Ansicht ist, sowas in die eigene Seite einzubinden (nein, das ist kein Trend), dann doch bitte mit Media-Query auf mobile ausschließen. Wenn man sich die einzelnen Beispiele ansieht und dann die Prozessorlast, die sie erzeugen, sind sie auf dem Handy unnötige Batteriefresser

Schreibe einen Kommentar

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

On Key

Related Posts

Ein aufgeräumtes Home Office

Organisiert ins Social Distancing: Die besten Tools fürs Home Office

Gerade ist das Thema Heimarbeit branchenübergreifend präsent wie nie. Aber auch unabhängig von Kontaktsperren in Zeiten des Coronavirus stellt einen das Home-Office für die Eigenorganisation und für die Kommunikation mit den lieben Kollegen vor ganz andere Herausforderungen als im Büro.

Maria Goeppert-Mayer Nobelpreisträgerin CSS Grid Layouts

Responsive Design mit CSS: Flexbox oder Grid? (Mit Beispielen)

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Kostenlose Bewerbungsvorlagen zum Download

Die 37 besten und kostenlosen Bewerbungsvorlagen (2020)

Eine ordentliche Bewerbung mit schick designtem Lebenslauf, der nicht mit Word zusammengestöpselt wurde, ist im Bewerbungsverfahren heutzutage mal mindestens die halbe Miete. Außergewöhnliche Gestaltung lässt eine Person in einem Licht erscheinen, in dem nicht jeder zu glänzen vermag. Im besten Falle macht die Bewerbung so viel her, dass sich potenzielle Arbeit- oder Auftraggeber prinzipiell schon vor dem Vorstellungsgespräch mit dem Herzen für Sie entschieden haben.