Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Webdesign » Bewegte Hintergrundbilder für die Website

Bewegte Hintergrundbilder für die Website

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Dieter Petereit
  • 24. März 2019

HANASEIGAIHA / 花青海波

Dieser wunderschöne Pen ist Teil einer Reihe animierter traditioneller japanischer Muster von Toshiya Marukubo. Ein Blick auf sein Profil lohnt sich garantiert!

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

KIKUSEIGAIHA / 菊青海波

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

moonRiver

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

harvest

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

interstellar

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Moonlight Desert

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

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:

bubblydefault Bewegte Hintergrundbilder für die Website

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:

Bewegte Hintergrundbilder für die Website

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

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Fireflies

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Fireflies

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Rymd

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Color Changing

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Pattern Animation (Infinite)

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Pure CSS Animated Background

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Sunrise

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Triangles Animation

large Bewegte Hintergrundbilder für die Website
Link zur Demo auf CodePen.io

Statische Hintergrundbilder im SVG-Format

hero patterns Bewegte Hintergrundbilder für die Website
Bewegte Hintergrundbilder für die Website 1

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!

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

SEO Agentur Hamburg • Die Nr. 1 in Hamburg.

SEO Agentur Hamburg

Hamburg

United Ads Agentur Starnberg.

UnitedAds

Starnberg

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

Berlin Translate Übersetzungsagentur Logo.

Berlin Translate

Berlin

Website Akademie Logo.

Websiteakademie

München

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

2 Antworten

  1. 911 Fahrenheit sagt:
    27. März 2020 um 11:22 Uhr

    Nur ein paar Zeilen Code für die „Fancyness“ und schon ist die Barrierefreiheit dahin. Großartig! Bitte mehr solch toller Tipps!

    Antworten
  2. Peter Hock sagt:
    24. März 2020 um 22:19 Uhr

    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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑