Effekt-Baukasten — IBK Energie- u. Gebäudetechnik

01Text-Effekte

Buchstaben in Bewegung.

Typewriter-Loop

Text tippt sich, löscht sich, tippt neu — wie auf den Unterseiten-Titeln dieser Demo.

PRÄZISION

Decoder / Scramble

Zeichen rotieren zufällig und rasten nacheinander ein — Sci-Fi-Terminal-Ästhetik.

AUS EINER HAND

Schimmer-Verlauf

Ein Lichtverlauf wandert dauerhaft durch die Headline — dezent und edel.

BERLIN

Glitch (Hover)

Beim Überfahren zerreißt der Text kurz in Farbkanäle — technisch, aufmerksamkeitsstark.

02Buttons & Karten

Kleine Gesten, großer Eindruck.

3D-Tilt

Karten-Tilt

Die Karte neigt sich zur Maus, ein Glanzlicht folgt dem Cursor — bereits auf allen Karten der Seite aktiv.

Wichtig

Laufender Leucht-Rahmen

Ein Lichtstreifen umrundet das Element dauerhaft — ideal, um ein einzelnes Angebot hervorzuheben.

Vorderseite

Rückseite mit Details

Flip-Card (Hover)

Karte dreht sich um und zeigt Zusatzinfos auf der Rückseite — z. B. für Leistungen oder Team.

Magnetischer Button

Zieht sich sanft zum Cursor und federt zurück — bereits auf allen Buttons der Seite aktiv.

Füll-Button

Die Fläche flutet beim Hover von links mit der Akzentfarbe — klare Belohnung fürs Zeigen.

Klick-Ripple

Vom Klickpunkt breitet sich eine Welle aus — direktes, fühlbares Feedback.

Konfetti-Burst

Für den Moment nach dem Absenden eines Formulars — kurzes, positives Feuerwerk.

Bewege die Maus hier

Spotlight-Fläche

Ein Lichtkegel folgt dem Cursor über die Fläche und legt Inhalte frei.

03Ambiente & Hintergründe

Flächen, die leben.

Partikel-Netz

Schwebende Punkte verbinden sich zu Linien — lebendiger Hintergrund für Hero- oder CTA-Flächen.

Aurora

Aurora-Verlauf

Weiche Farbwolken in Markenfarben ziehen langsam durch den Hintergrund.

Technik-Raster

Raster-Puls

Ein technisches Blueprint-Raster mit wanderndem Lichtpuls — passt zur Planungs-Story.

04Daten & Zahlen

Zahlen, die ankommen.

0%

Fortschrittsring

Ring und Zahl zählen gemeinsam hoch, sobald sie ins Bild kommen — z. B. „98 % Termintreue“.

Mo

Di

Mi

Do

Fr

Wachsende Balken

Balkendiagramme wachsen gestaffelt aus der Grundlinie — für Kennzahlen und Vergleiche.

05Scroll-Effekte

Die Seite reagiert auf dich.

HINTERGRUND

MITTELEBENE

Vordergrund

Parallax-Ebenen

Drei Ebenen bewegen sich beim Scrollen unterschiedlich schnell — Tiefe ohne 3D.

Linie zeichnet sich

Eine SVG-Linie wächst mit dem Scroll-Fortschritt — perfekt für Zeitachsen und Prozesse.

01

Karten stapeln sich

Beim Scrollen legt sich Karte auf Karte — jede bleibt kurz „kleben“.

02

Ideal für Schritte

Beratung, Planung, Ausführung — jeder Schritt bekommt seine Bühne.

03

Ohne Bibliothek

Reines CSS (position: sticky) — läuft überall flüssig.

06Praktisch für Referenzen

Vorher / Nachher.

Plan-Look Foto-Look

Vergleichs-Slider

Regler ziehen: links Zeichnungs-Look, rechts Original — ideal für Sanierungen (vorher/nachher) oder Plan vs. gebaut.

Und vieles mehr

Alles hier ist ein Baustein.

Jeder Effekt lässt sich in Farbe, Tempo und Intensität an die Seite anpassen — sag einfach, welcher gefällt.

Effekt-Baukasten.