Scroll-Film persönliche Website
Erstellen Sie eine persönliche oder Portfolio-Website, bei der das Scrollen der Abspielkopf ist. Keine Videodatei. Angenehmes Tempo, vollständig responsiv, progressive Verbesserung.
Autorität
- CSS-sticky-Szenen plus scroll-gesteuerte Animation zuerst. Eine Timeline-Bibliothek nur, wenn CSS weder Pinning noch Scrubbing ermöglicht.
- Folgen Sie der Kunstrichtung oder dem Geschmacks-Skill des Repos. Greifen Sie nicht zu einem generischen Frontend-Kit, das diesem Geschmack widerspricht.
- Offizielle Scroll-Timeline-Fähigkeiten, wenn sie installiert sind.
- Katalogideen nur (ja / vielleicht): Unschärfe-Fade, Glanz-Hover, Scroll-Fortschritt, ein verzögerter Zeiger, Rauschen, Lichtstrahlen. Neu implementieren in CSS oder der Timeline-Bibliothek. Keine Bewegungsprimitive eines anderen Frameworks einfügen.
- Beachten Sie
prefers-reduced-motion: reduce– Standbilder, gleiche Inhaltsreihenfolge, keine bewegungsgesteuerten Handlungsaufforderungen.
Kameraleiter (an der ersten Sprosse anhalten, die hält)
- Redundante Szenen löschen.
- CSS: sticky-Szenen,
animation-timeline: view()/scroll(), nur Transform und Deckkraft. - Eine Scroll-Trigger-Bibliothek nur, wenn CSS keine Szene pinnen oder scrubben kann. Sanftes Scrubbing, lineare Abnahme, bei Unmount beenden. Nur Transform und Deckkraft animieren.
- Kein Smooth-Scroll-Hijack von Drittanbietern, Canvas-Frame-Sequenzen, 3D-Helden oder
<video>-currentTime-Scrubbing hinzufügen.
Szenengrammatik
- Maximal 4–6 Szenen. Angrenzende Schnitte dürfen nicht dieselbe Layout-Familie teilen.
- Öffnen, Halten (Pinnen plus Scrubbing), Schnitt, Schließen.
- Pin-Muster: ein hoher Scroller plus ein klebriges, vollbildgroßes Standbild.
- Kein ganzseitiger, obligatorischer Scroll-Snap.
- Inhalt muss auch ohne JavaScript lesbar sein. Kein Scroll-Hijack. Kein pro-Tick-Framework-Zustand bei Mausbewegung oder Scrollen.
Inhalt der persönlichen Website (je nach Vorgabe anpassen)
Typische Abschnitte: Identität, was ich baue, das aktuelle Produkt, Links (die echten Profile, die sie dir gegeben haben), ein abschließender Call-to-Action. Links sind nur echte URLs – niemals Profile erfinden. Frage nach den echten, wenn sie fehlen.
Cursor
Ein benutzerdefinierter Cursor mit Feder-Lag oder Glanz bei Bewegung ist als progressive Verbesserung erlaubt. Halten Sie den nativen Cursor für reduzierte Bewegung und Touch-Geräte verfügbar. Bevorzugen Sie Pointer-Listener mit Animation-Frame-Drosselung, nicht Framework-Zustand bei jeder Bewegung.
Stack-Standardeinstellungen
- Ein modernes Web-Framework ist in Ordnung.
- Bereitstellung auf dem Hosting-Konto des Eigentümers, nicht auf dem eines anderen Teams.
- Die Codierung folgt dem lokalen Codierungsstandard: implementieren, dann eine zweite Überprüfung und eine Überprüfungsroutine einrichten.
Abschlussdefinition
- Eine Live-URL unter dem Konto des Eigentümers
- Scrollen fühlt sich wie ein Film an (angenehm, nicht abgehackt)
- Responsiv; reduzierte Bewegung als Standbilder
- Nur echte Links
- Melden Sie die URL, sobald sie live ist