99dev · Arsenal-Showreel · intern
Jedes Werkzeug einmal in voller Kraft.
Achtzehn Techniken, jede einmal, jede mit Nummer. Beispiel-Marke und Bildmaterial stammen aus dem Schönthal-Bau — die Technik ist unabhängig davon. Sag die Nummern, die du willst.
Nummer 1: Video-Hero
Stummer Loop über die volle Bühne, Poster als LCP-Bild, ein Schleier nur dort, wo Text steht.
Preis: Video muss produziert werden (Veo-Pipeline). Ohne gutes Material wirkt es billiger als ein Standbild.
Register
- 01Video-Hero
- 02Typo-Auftritt, Wort für Wort
- 03Zeilen-Reveal
- 04Masken-Wipe
- 05Zoom-Reveal
- 06Gepinnte Szene
- 07Parallax-Tiefe
- 08Ghost-Typo
- 09Slab-Szenenwechsel
- 10Snap-Galerie mit Anschnitt
- 11Marquee am Scroll
- 12Zähler
- 13Vorher/Nachher
- 14Magnetischer CTA
- 15Cursor-Tiefe
- 16Glut-Atmosphäre
- 17Hover-Inversion
- 18Klebende Bildspalte
Nummer 2: Typo-Auftritt, Wort für Wort
Die Überschrift oben im Hero: jedes Wort steigt einzeln auf, 70 ms versetzt, einmal beim Laden.
Preis: Nur für EINE Überschrift pro Seite. Zweimal, und es wird zur Masche.
Nummer 3: Zeilen-Reveal
Ein Absatz wird zeilenweise aufgedeckt — eine Maske läuft von unten durch, gestaffelt.
Preis: Braucht handgesetzte Zeilen; bei fliessendem Text bricht die Staffelung.
Erst kommt die Zeile.Dann die zweite.Dann steht der Satz.
Nummer 4: Masken-Wipe
Das Bild wird nicht eingeblendet, sondern aufgedeckt: eine Kante läuft von links durch.
Preis: Kostet nichts. Wirkt nur, wenn es die Ausnahme bleibt.
Nummer 5: Zoom-Reveal
Das Bild kommt zu gross und beschnitten herein und findet beim Scrollen seine Grösse.
Preis: Nur bei Motiven mit Luft am Rand — sonst schneidet der Startzustand den Inhalt weg.
Nummer 6: Gepinnte Szene
Die Bühne bleibt stehen, während drei Ebenen ineinander übergehen. 200vh Scrollweg, ein Kapitel.
Preis: Der teuerste Effekt der Liste: er kostet Scrollweg und braucht drei Motive, die zusammengehören.
Nummer 10: Snap-Galerie mit Anschnitt
Horizontale Spur, die rechts angeschnitten ist — man sieht, dass es weitergeht. Rastet beim Wischen ein.
Preis: Auf dem Desktop braucht sie sichtbare Pfeile, sonst findet sie niemand.
Nummer 11: Marquee am Scroll
Das Band läuft am Scrollfortschritt, nicht an der Uhr: es steht still, wenn der Gast stillsteht.
Preis: Als Uhr-Animation ist es Zappeln. Nur am Scroll ist es Gestaltung.
Nummer 12: Zähler
Kennzahlen zählen einmal hoch, wenn sie ins Bild kommen.
Preis: NUR mit belegten Zahlen. Eine hochgezählte Erfindung ist eine Erfindung mit Trommelwirbel.
0seit
0+ PizzenPizzen
0/7 offen7 offen
Nummer 13: Vorher/Nachher
Regler über zwei Aufnahmen. Bedienbar mit Maus, Finger und Tastatur — darunter liegt ein echter Schieberegler.
Preis: Braucht zwei Aufnahmen aus derselben Position. Ohne das ist es Kirmes.
Nummer 14: Magnetischer CTA + Licht-Sweep
Der Knopf zieht leicht zum Zeiger, ein Lichtstreifen läuft einmal durch. Maximal 10 px Weg.
Preis: Nur mit feinem Zeiger; auf Touch passiert nichts. Nur für den EINEN Hauptweg.
Nummer 15: Cursor-Tiefe
Die Karte kippt zum Zeiger, Bild und Schrift darin verschieben sich unterschiedlich weit.
Preis: Nur mit feinem Zeiger. Bei mehr als einer Karte pro Seite wird der Trick sichtbar.
Am GrillNummer 17: Hover-Inversion
Die Zeile dreht bei Berührung vollständig um — sofort, ohne Übergang. Nur die Einrückung läuft weich.
Preis: Kostet nichts. Der sofortige Farbwechsel ist Absicht: gemessen an der Referenz, dort steht 0 s.
Nummer 18: Klebende Bildspalte
Das Bild bleibt stehen, während der Text daneben weiterläuft. Ein Layout-Zustand, keine Animation — kostet nichts an Leistung.
Preis: Nur wenn der Text LÄNGER ist als das Bild. Sonst bleibt eine leere Restfläche stehen.
Die klebende Spalte ist das einzige strukturelle Scroll-Mittel, das die Referenzen benutzen.
Sie braucht kein Skript, kein Pinning und keine Fortschrittsrechnung — nur position: sticky.
Der Preis steht oben: der Text muss länger sein als das Bild, sonst entsteht genau die Restfläche, die eine Seite billig aussehen lässt.
Deshalb steht die Technik hier mit Preisschild und nicht als Trick.
