Bewegte Hintergrundbilder für die Website

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

Moonlight Desert


Oscar Salazar hat mit CSS und JS eine schöne Wüstenszenerie kreiert… Sternschnuppe inklusive!

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!

Anzeige

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.

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.