WebSB Zurück zu den Stilen
Animations-Sammlung

Bewegung, die
begeistert.verkauft.überzeugt.

Eine Sammlung von Effekten, die ich für Websites umsetzen kann. Fahr mit der Maus über die Karten, klick auf Buttons und scroll durch die Seite. Im Hintergrund reagiert das Netz auf deine Maus.

Text-Animationen

Überschriften und Schlagworte, die Aufmerksamkeit ziehen.

01

Schreibmaschine

Text tippt sich Buchstabe für Buchstabe und wechselt zwischen mehreren Sätzen.

02
WEBSB.DE

Text entschlüsseln

Zeichen wirbeln durcheinander und ergeben dann das Wort. Mit der Maus drüberfahren startet es neu.

03
Premium Design

Glanz über Text

Ein Lichtstreifen läuft durch die Schrift, ideal für Hervorhebungen.

04
Hallo!

Welle

Jeder Buchstabe hüpft leicht versetzt, verspielt und freundlich.

05
Farbverlauf

Fließender Farbverlauf

Mehrere Farben wandern endlos durch den Text.

06

Ein Satz mit wichtiger Botschaft, die sich beim Scrollen markiert.

Textmarker beim Scrollen

Wichtige Wörter werden markiert, sobald sie ins Bild kommen.

Maus und Hover

Effekte, die auf den Mauszeiger reagieren und Elemente lebendig wirken lassen.

07
3D-KarteBewege die Maus darüber

3D-Kippkarte mit Lichtreflex

Die Karte neigt sich zur Maus, ein Glanzpunkt folgt dem Zeiger.

08

Magnetischer Button

Der Button wird vom Mauszeiger angezogen, bevor man ihn berührt.

09
Laufender Rahmen

Laufender Rahmen

Ein Lichtstreifen umkreist den Rand, gut für Angebote oder das beste Paket.

10

Glanz-Button

Beim Hover zieht ein Lichtschimmer über den Button.

11

Klick-Welle

Vom Klickpunkt breitet sich eine Welle aus, wie bei Apps.

13
Taschenlampe

Lichtkegel

Ein Lichtkegel folgt der Maus über einer dunklen Fläche.

Beim Scrollen

Inhalte erscheinen, zählen hoch oder zeichnen sich, während man durch die Seite scrollt. Ganz oben zeigt ein Balken, wie weit du schon gescrollt hast.

14
0Projekte
0zufrieden
0Antwort

Zahlen zählen hoch

Kennzahlen laufen hoch, sobald sie sichtbar werden.

15

Nacheinander einblenden

Listen und Karten erscheinen kurz nacheinander statt alle auf einmal.

16

Linie zeichnet sich

Die Linie wird beim Scrollen gezeichnet, scroll hoch und runter.

17
Enthüllung

Wischen und Enthüllen

Ein Bild oder eine Fläche wird von links nach rechts aufgedeckt.

18

Parallax

Ebenen bewegen sich beim Scrollen unterschiedlich schnell, das erzeugt Tiefe.

19

Hereinzoomen

Elemente wachsen mit leichter Drehung ins Bild.

20 · Seitwärts scrollen

Du scrollst nach unten, die Karten fahren seitwärts.

Konzept
Design
Entwicklung
Livegang
Betreuung
ihre-firma-boeblingen.de Ihre Firma LeistungenPreiseKontakt Ihr Handwerk. Anfragen </> 1 s 0 Webdesign Böblingen Platz 1 ihre-firma-boeblingen.de Ihre Firma | Handwerk in Böblingen ★★★★★ 4,9 · Jetzt kostenlos anfragen Online Besucher ↑
38 · Scroll-Film
01 · Konzept

Erst die Struktur, dann das Design.

Wir legen gemeinsam fest, welche Seiten und Inhalte Ihre Kunden brauchen. Daraus entsteht ein klarer Aufbau.

  • Seitenstruktur und Navigation
  • Inhalte und Ziele
  • Festpreis-Angebot
02 · Design

Ihr Design, Ihre Marke.

Farben, Schriften und Bilder werden auf Ihr Unternehmen abgestimmt. Kein Baukasten, keine Vorlage.

  • Individuelles Layout
  • Farben und Typografie
  • Sie sehen den Fortschritt live
03 · Entwicklung

Schnell, auf jedem Gerät.

Ich setze das Design sauber um, für Handy, Tablet und Desktop, und optimiere auf beste Ladezeiten.

  • Mobile First
  • PageSpeed-Ziel 100
  • Programmiert oder WordPress
04 · Livegang und SEO

Gefunden werden, Kunden gewinnen.

Ihre Website geht online und wird für Suchanfragen in Ihrer Region optimiert. So kommen neue Anfragen rein.

  • Local SEO und Google-Profil
  • Domain, Hosting und Livegang
  • Betreuung nach dem Start

Bedienelemente

Kleine Bewegungen, die Bedienung angenehmer und verständlicher machen.

21

Tabs mit gleitender Markierung

Die Auswahl gleitet zum angeklickten Reiter.

22

Schalter

Weich gleitender Ein/Aus-Schalter.

23
Das hängt vom Umfang ab. Der Preisrechner gibt einen ersten Richtwert.
Meist 3 bis 6 Wochen bis zum Livegang.

Weiches Aufklappen

FAQ-Antworten öffnen sich fließend statt schlagartig.

24
0%

Fortschrittsring

Klick auf den Ring für einen neuen Wert.

25

Benachrichtigungen

Hinweise gleiten rein und verschwinden von selbst.

26

Pop-up-Fenster

Ein Fenster zoomt sanft auf, der Hintergrund dunkelt ab.

27

Konfetti

Eine kleine Feier, zum Beispiel nach dem Absenden eines Formulars.

28
VorderseiteRückseite

Wendekarte

Drüberfahren oder antippen dreht die Karte um.

29

Lade-Animationen

Drei Varianten, die beim Warten zeigen, dass etwas passiert.

30

Platzhalter beim Laden

Graue Flächen schimmern, bis echte Inhalte geladen sind.

31

Like mit Funken

Das Herz springt und sprüht kleine Funken.

Formen und Hintergründe

Dekorative Bewegung für Hintergründe und Blickfänge.

32

Fließende Form

Eine organische Form verändert langsam ihre Gestalt.

33

3D-Würfel

Ein echter 3D-Körper, nur mit CSS gebaut.

34

Pulsierende Ringe

Zeigt Aufmerksamkeit, zum Beispiel für einen Standort oder „Live“.

35

Umlaufbahn

Punkte kreisen um ein Zentrum.

36
WebdesignSEOShopifyWordPressBrandingPerformance

Laufband

Endlos laufende Leiste für Logos, Kunden oder Leistungen.

37

Bewegtes Raster

Ein technisches Gitter wandert langsam, dezent als Hintergrund.