Bibliothek

Sektions-Hintergründe

Alle besonderen Hintergründe, die in unseren Websites schon laufen, auf einer Seite. Dazu vier neue Vorschläge. Jeder Eintrag hat eine Kennung, damit die Auswahl später als eigener Bereich im Design-Konfigurator landen kann (Sektions-Hintergrund je Sektion oder je Site).

Die Hauptfarbe lässt sich oben umstellen, alle Muster ziehen nach. Muster mit Maus-Effekt reagieren erst, wenn der Zeiger über der Sektion ist.

01

Punktraster auf Verlauf punkte-verlauf

Bestand Herkunft: Template v1 Abschluss-CTA (Form „slash“), DaningoSport, Fit501, K5 Technik: nur CSS Maus: nein Kosten: 0 Requests, 0 JS Grund: dunkel, Firmenfarbe

Verlauf in der Hauptfarbe, darüber ein Raster aus Hohlkreisen (40 px), rechts ein heller Schweif, unten das schräge Band als Übergang. Der Standard aus dem Template, darum auf den meisten Sites bereits drin.

Starte jetzt

Online anmelden.
14 Tage kostenlos.
Monatlich kündbar.

Melde dich jetzt ganz einfach online an und teste, ob das Training bei uns das Richtige für dich ist.

Jetzt anmeldenAlle Trainingsangebote
02

Punkte weichen der Maus aus punkte-maus

Bestand Herkunft: Life X (InteractiveDotGrid), AktiVita Abschluss-CTA hell Technik: Canvas Maus: ja, Abstoßung mit Federkraft Kosten: 0 Requests, ~2 KB JS, zeichnet nur bei Sichtbarkeit Grund: hell oder dunkel

Regelmäßiges Punktraster (36 px) in der Hauptfarbe. Punkte im Umkreis des Zeigers wachsen und weichen aus, danach federn sie zurück. Ohne Maus (Handy) bleibt ein ruhiges statisches Raster. Hier auf hellem Grund wie bei AktiVita.

Starte jetzt

Dein erstes Mal bei uns?

Bewege die Maus über die Fläche: Die Punkte reagieren auf den Zeiger und finden danach von selbst zurück.

Kostenlos testenKontakt aufnehmen
03

Konstellation netz

Bestand Herkunft: Life X Startseite (lx-fx „particles“) Technik: Canvas Maus: ja, Punkte werden lebendig und verbinden sich unter dem Zeiger Kosten: 0 Requests, ~4 KB JS Grund: dunkel

Zwei ruhige, statische Netze links und rechts vom Text sind immer sichtbar (auch am Handy). Kommt die Maus ins Feld, blenden sie aus und ein Partikelfeld übernimmt: Punkte unter dem Zeiger werden größer, weichen aus und verbinden sich zu einer Konstellation. Renés Wunsch vom 30.08. für Life X.

Starte jetzt

Training, das zu dir passt

Ruhig ohne Maus, lebendig mit Maus. Die Farbe folgt der Hauptfarbe oben in der Leiste.

Jetzt startenMehr erfahren
04

Ringe und Diagonalschraffur ringe-schraffur

Bestand Herkunft: Template v1 Kennzahlen-Zeile (StatsBar), auf allen v1-Sites Technik: CSS + Inline-SVG Maus: nein Kosten: 0 Requests, 0 JS Grund: dunkel

Sehr zurückhaltend: drei große Hohlringe (einer in der Hauptfarbe angehaucht) und eine 45-Grad-Schraffur mit 2,5 % Weiß. Gut für Zahlen und Fakten, wo der Inhalt tragen muss. Bei DaningoSport heute mit Petrol-Verlauf statt Grau.

Zahlen

100+ Trainingsmöglichkeiten

Die Fläche hält sich zurück, damit Kennzahlen und Symbole wirken.

Alle Angebote
05

Mesh-Verlauf mesh-verlauf

Bestand Herkunft: Template v1 Hilfsklasse bg-mesh-gradient Technik: nur CSS Maus: nein Kosten: 0 Requests, 0 JS Grund: hell

Vier weiche Farbwolken aus den Ecken in Hauptfarbe und heller Hauptfarbe auf hellem Grund. Bewusst ohne harte Leuchtflecken, die Wolken sind auf 15 bis 25 % gedämpft. Passt zu Formularen und Kontakt-Sektionen.

Kontakt

Wir sind für dich da

Schreib uns, ruf an oder komm vorbei. Wir melden uns innerhalb eines Werktags.

Nachricht schreibenAnrufen
06

Feines Punktraster punktraster-fein

Bestand Herkunft: Template v1 Hilfsklasse bg-dot-pattern Technik: nur CSS Maus: nein Kosten: 0 Requests, 0 JS Grund: hell oder dunkel

1-px-Punkte im 32-px-Raster in der Textfarbe mit 10 bis 14 % Deckung. Die leiseste Variante, eher Papierstruktur als Muster. Für Textsektionen, wo ein glatter Grund zu leer wirkt.

Über uns

Betreut statt allein gelassen

Unser Team begleitet dich bei jedem Schritt deines Trainingsweges.

Team kennenlernen
07

Linienraster mit Maus-Spot linienraster-spot

Neu Technik: CSS-Maske + 6 Zeilen JS Maus: ja, ein Lichtkreis hebt das Raster in der Hauptfarbe hervor Kosten: 0 Requests, kein Canvas, kein Dauer-Rendering Grund: dunkel

Ein leises weißes Linienraster liegt immer da. Unter dem Zeiger wird dasselbe Raster in der Hauptfarbe sichtbar, wie eine Taschenlampe. Ohne Maus bleibt der Spot in der Mitte stehen. Technisch nur eine Maske, die ihre Position aus zwei CSS-Variablen liest. Passt zur kantigen Formensprache besser als runde Punkte.

Technik

Training mit System

Bewege die Maus über die Fläche. Das Raster leuchtet dort auf, wo der Zeiger steht.

Geräte ansehenProbetraining
08

Konturlinien in Drift konturlinien

Neu Technik: Inline-SVG + CSS-Animation Maus: nein, läuft von selbst (sehr langsam) Kosten: 0 Requests, 0 JS Grund: dunkel

Höhenlinien wie auf einer Landkarte, zwei Lagen, die in 26 und 34 Sekunden gegeneinander driften. Wirkt organisch und ruhig, passt zu Gesundheit, Reha, Wellness. Bei „Bewegung reduzieren“ im System steht das Bild still.

Gesundheit

Schmerzfrei durch Bewegung

Die Linien wandern kaum merklich. Nichts blinkt, nichts lenkt vom Text ab.

Reha-SportBeratung
09

Schräge Streifen mit Lichtlauf streifen-lichtlauf

Neu Technik: nur CSS (zwei Streifenlagen + ein animierter Lichtbalken) Maus: nein, alle 9 Sekunden zieht ein Lichtbalken durch Kosten: 0 Requests, 0 JS Grund: dunkel, Firmenfarbe

Feine und breite Streifen im gleichen Winkel wie die Schräge im Kopf (Form „slash“). Ein weicher Lichtbalken läuft periodisch von links nach rechts, sonst steht alles. Sportlich, energisch, ideal für Online-Deal und Countdown.

Online-Deal

Nur noch 3 Tage: Startpaket geschenkt

Schließe jetzt online ab und spar dir das Startpaket. Der Deal endet Sonntag um Mitternacht.

Online-Deal sichernDetails
10

Wortmarke als Wasserzeichen wortmarke-outline

Neu Technik: CSS-Textkontur + 5 Zeilen JS fürs Mitlaufen beim Scrollen Maus: nein, verschiebt sich mit dem Scrollen Kosten: 0 Requests Grund: dunkel oder hell

Der Ort oder der Studioname riesig als Umrissschrift hinter dem Inhalt, ein Wort in der Hauptfarbe. Beim Scrollen läuft der Schriftzug langsam seitlich mit. Verwandt mit dem „NETTETAL“ im DaningoSport-Hero und dem X-Follow bei Life X, aber ohne Maus und ohne Logo-Grafik. Text kommt aus der Akte (Stadt, Name), also je Kunde automatisch anders.

Nettetal
Dein Studio in Nettetal

Hier trainiert Nettetal

Scrolle etwas auf und ab: Der Schriftzug im Hintergrund bewegt sich mit.

AnfahrtÖffnungszeiten
↓

Scroll-Animationen: Teile fügen sich zusammen

Neu seit 03.10.2026 (Fitness Point Plön): Statt einer Fläche oder eines Musters baut sich der Hintergrund der Abschluss-CTA beim Hineinscrollen aus Einzelteilen auf, die vom Rand kommen. Steht die CTA mittig im Fenster, ist das Bild fertig, beim Zurückscrollen läuft es rückwärts. Drei Varianten sind gebaut und liegen im Plön-Repo unter src/custom/cta-varianten/. Bei Plön läuft Variante 11. Bei reduzierter Bewegung steht der Endzustand fest.

11

Der Punkt scroll-punkt

Scroll-Animation Technik: SVG + GSAP ScrollTrigger (scrub), nur transform und opacity Maus: nein, baut sich beim Scrollen auf Teile: 15 am Desktop, 11 am Handy Grund: hell Stand: Kundenlösung Fitness Point Plön, noch nicht im Konfigurator wählbar

Ringstücke in zwei Markenfarben und Grau kommen drehend von allen Rändern und rasten hinter dem Text zu einer großen weißen Scheibe ein, danach läuft einmal ein ruhiger Impuls nach außen. Passt zu runden Logos und zu Namen mit „Point“ oder „Circle“. Die Scheibe wird aus den echten Textzeilen gemessen, kein Ring kreuzt den Text. Eine Scroll-Animation lässt sich nicht als Standbild beurteilen: Live ansehen und selbst scrollen (alle drei Varianten untereinander).

Endzustand der Animation „Der Punkt“ am Beispiel Fitness Point Plön
12

Fläche aus Teilen scroll-flaeche

Scroll-Animation Technik: SVG + GSAP ScrollTrigger (scrub), nur transform und opacity Maus: nein, baut sich beim Scrollen auf Teile: 18 plus 2 Kanten am Desktop, 10 plus 2 am Handy Grund: hell Stand: Kundenlösung Fitness Point Plön, noch nicht im Konfigurator wählbar

Kantige Bruchstücke fliegen von außen herein und setzen sich zu einer weißen Tafel mit zwei abgeschrägten Ecken zusammen, zuletzt rasten zwei farbige Winkelkanten ein. Passt zu kantigen Formensprachen (slash, diagonal). Kurz vor dem Ende liegen feine Bruchlinien über dem Text. Eine Scroll-Animation lässt sich nicht als Standbild beurteilen: Live ansehen und selbst scrollen (alle drei Varianten untereinander).

Endzustand der Animation „Fläche aus Teilen“ am Beispiel Fitness Point Plön
13

Linien finden sich scroll-linien

Scroll-Animation Technik: SVG + GSAP ScrollTrigger (scrub), nur transform und opacity Maus: nein, baut sich beim Scrollen auf Teile: 8 Linien am Desktop, 6 am Handy Grund: hell Stand: Kundenlösung Fitness Point Plön, noch nicht im Konfigurator wählbar

Wellenlinien laufen von links und rechts herein, beruhigen sich und treffen sich in einem Punkt unter dem Hauptknopf. Passt zur Formensprache Welle. Die zurückhaltendste der drei; am Handy rahmen die Linien die Knöpfe eher, als dass sie eine Welle bilden. Eine Scroll-Animation lässt sich nicht als Standbild beurteilen: Live ansehen und selbst scrollen (alle drei Varianten untereinander).

Endzustand der Animation „Linien finden sich“ am Beispiel Fitness Point Plön