Sanft nach oben
Der Klassiker: dezent, seriös, nie falsch. Die sichere Wahl für Ingenieur-Seiten.
E1
Buchstaben-Auftritt
SplitTextDie Überschrift oben ist gerade Buchstabe für Buchstabe hereingeflogen — hier noch einmal zum Zuschauen:
Technik, die man spürt.
Gut für: die eine große Überschrift ganz oben. Sparsam einsetzen.
E2
Zeilen-Vorhang
SplitText · MaskeGanze Zeilen schieben sich wie hinter einem Vorhang hervor — ruhiger als E1, wirkt edel:
Planung ist unsichtbar.
Gute Planung merkt man trotzdem —
an der Luft, am Klima, an der Ruhe.
Gut für: Leitsprüche und längere Aussagen mitten auf der Seite.
E3
Zahlen-Flimmern
ScrambleTextText baut sich aus wirren Zeichen auf, wie auf einem Messgerät, das sich einpendelt:
Gut für: Technik-Looks, Messwerte, Zahlen mit Show-Charakter. Vorsicht: schnell zu viel.
E4
Drei Arten des Erscheinens
ScrollTriggerDasselbe Prinzip — Inhalte erscheinen beim Hereinscrollen — in drei Geschmacksrichtungen. Welche fühlt sich für dich richtig an?
Leicht gewachsen
Kommt etwas kleiner und wächst auf volle Größe — lebendiger, mit kleinem Schwung.
Scharf gestellt
Taucht aus der Unschärfe auf wie ein Foto beim Fokussieren — modern, auffällig.
Gut für: Karten, Leistungen, Referenzen — überall, wo Inhalte in Gruppen stehen.
E5
Parallax-Tiefe
ScrollTrigger · ScrubDrei Ebenen bewegen sich beim Scrollen unterschiedlich schnell — das Auge liest das als räumliche Tiefe. Scroll langsam auf und ab:
TIEFE
Gut für: Hero-Bereiche und Stimmungs-Abschnitte. Dezent dosieren.
E6
Seitwärts-Zug
ScrollTrigger · Pin + horizontalDu scrollst nach unten — die Inhalte fahren seitlich durchs Bild.
WAGEN 1/4
Schritt für Schritt
Perfekt, um einen Ablauf zu erzählen: Anfrage, Planung, Ausführung, Übergabe.
WAGEN 2/4
Volle Aufmerksamkeit
Es ist immer nur ein Wagen im Blick — der Besucher kann gar nicht überspringen.
WAGEN 3/4
Fühlt sich besonders an
Seitwärts-Scrollen kennt man von teuren Marken-Seiten. Hebt dich ab.
WAGEN 4/4
Und weiter geht's
Am Ende des Zuges scrollt die Seite ganz normal nach unten weiter.
E7
Zahlen, die zählen
GSAP-ZählerKennzahlen zählen von null hoch, sobald sie ins Bild kommen — Zahlen bekommen Gewicht:
0
Projekte geplant
0
Jahre Erfahrung
0
Termintreue
Gut für: Referenz-Zahlen, „Über uns“, Vertrauens-Abschnitte.
E8
Magnetknopf
GSAP quickToFahr mit der Maus in die Zone: Der Knopf kommt dir ein Stück entgegen und glüht — als würde er sich auf den Klick freuen:
Gut für: den einen wichtigen Knopf der Seite. Nur am Rechner spürbar, am Handy einfach ein normaler Knopf.
E9
Laufband
Endlos-TweenEin Band zieht endlos durch — oft für Kundenlogos oder Leistungs-Stichworte:
Lüftung · Heizung · Kälte · Sanitär · MSR · Brandschutz ·
Lüftung · Heizung · Kälte · Sanitär · MSR · Brandschutz ·
Gut für: Logos, Partner, Stichwort-Bänder. Manche empfinden es als unruhig — deine Entscheidung.
E10
Kurvenflug
MotionPath + DrawSVGEine Linie zeichnet sich beim Scrollen selbst, und ein Punkt fliegt die Kurve entlang — wie ein Luftstrom durch einen Kanalplan:
Gut für: Abläufe, Leitungswege, „so fließt die Luft“ — sehr passend für Gebäudetechnik.
E11
Anfassen & Werfen
Draggable + InertiaDie Karte lässt sich mit Maus oder Finger packen und werfen — sie rutscht mit Schwung aus und bleibt im Rahmen:
ZUM ANFASSEN
Pack mich und wirf mich durch die Zone.
Gut für: spielerische Elemente, Vorher/Nachher-Schieber, kleine Erlebnis-Momente.
E12
Bild-Enthüllung
ScrollTrigger · ClipDas Bild wird beim Hereinscrollen aufgedeckt, wie ein Rollo, das zur Seite fährt:
// hier stünde dein Projektfoto
Gut für: Projektfotos, Referenzbilder, große Stimmungsbilder.