Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Bewegte Hintergrundbilder für die Website

Bewegte Hintergrundbilder für die Website

  • Aktualisiert am 5. April 2023
  • von Dieter Petereit
  • Webdesign
  • 2 Kommentare

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:

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:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
<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.png 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.

Inhaltsverzeichnis

Agenturpartner in Kaufbeuren

Edit Content

Der Informations­designer

Mit einem starken und vielseitigen Team decken wir eine große Bandbreite an Leistungen für Sie ab. Als eingespielte Einheit profitieren Sie von unserer Erfahrung und Flexibilität.

— Thomas Soyter,
Informationsdesigner (B.A.)
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

2 Antworten

  1. 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
  2. 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

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting