scroll-film-site

Site personnel Scroll-film

Construisez un site personnel ou portfolio où le défilement est la tête de lecture. Pas un fichier vidéo. Un rythme agréable, entièrement responsive, amélioration progressive.

Autorité

1. Utilisez d'abord des scènes sticky CSS et des animations basées sur le défilement. Une bibliothèque de timeline uniquement lorsque le CSS ne peut pas épingler ou défiler.
2. Suivez la direction artistique du dépôt ou la compétence de goût. N'utilisez pas un kit frontend générique qui contredit ce goût.
3. Utilisez les compétences officielles scroll-timeline lorsqu'elles sont installées.
4. Idées de catalogue uniquement (oui / peut-être) : flou-fondu, effet de survol brillant, progression de défilement, pointeur avec retard, bruit, rayons lumineux. Réimplémentez en CSS ou dans la bibliothèque de timeline. Ne collez pas les primitives de mouvement d'un autre framework.
5. Respectez prefers-reduced-motion: reduce — des images fixes, même ordre de contenu, aucun appel à l'action dépendant du mouvement.

Échelle de caméra (arrêtez-vous au premier échelon qui tient)

1. Supprimez les scènes redondantes.
2. CSS : scènes sticky, animation-timeline: view() / scroll(), transform et opacité uniquement.
3. Une bibliothèque de déclenchement par défilement uniquement si le CSS ne peut pas épingler ou défiler une scène. Défilement doux, easing linéaire, kill au démontage. Animez uniquement transform et opacité.
4. N'ajoutez pas de détournement de défilement lisse tiers, de séquences d'images canvas, de héros 3D, ou de défilement par currentTime de <video>.

Grammaire des scènes

• Maximum 4 à 6 scènes. Les coupes adjacentes ne doivent pas partager la même famille de mise en page.
• Ouverture, maintien (épinglage plus défilement), coupe, fermeture.
• Motif d'épinglage : un grand défileur plus une image fixe sticky plein écran.
• Pas d'accrochage de défilement obligatoire sur toute la page.
• Le contenu doit être lisible avec JavaScript désactivé. Pas de détournement de défilement. Pas d'état de framework par tick sur mousemove ou défilement.

Contenu du site personnel (adaptez selon le brief)

Étapes typiques : identité, ce que je construis, le produit actuel, les liens (les vrais profils qu'ils vous ont donnés), un appel à l'action de fermeture. Les liens sont uniquement des URL réelles — n'inventez jamais de profils. Demandez les vrais s'ils manquent.

Curseur

Un curseur personnalisé avec un retard élastique ou un effet de survol brillant au déplacement est autorisé comme amélioration progressive. Gardez le curseur natif disponible pour la réduction de mouvement et le tactile. Préférez les écouteurs de pointeur avec limitation d'images d'animation, pas d'état de framework sur chaque déplacement.

Piles par défaut

• Un framework web moderne convient.
• Déployez sur le compte d'hébergement du propriétaire, pas sous une autre équipe.
• Le codage suit la norme de codage locale : implémentez, puis une seconde relecture, et armez une routine de vérification.

Définition de fait

• Une URL en ligne sous le compte du propriétaire
• Le défilement ressemble à un film (agréable, pas saccadé)
• Responsive ; images fixes en mode réduction de mouvement
• Uniquement des liens réels
• Signalez l'URL lorsqu'elle est en ligne