Défilement cinématographique et 3D

Que fait Défilement cinématographique et 3D ?

Routine courte pour ajouter une technique cinématographique à un site existant. Il s'agit de l'étape cinématographique du skill futuristic-web-design, empaquetée pour pouvoir s'exécuter seule.

Si ../futuristic-web-design/ se trouve à côté de ce skill, lisez references/cinematic-moves.md avant d'écrire du code de défilement ou 3D. Il contient le code pour chaque recette ci-dessous, la commande de réencodage, et le processus pour une histoire complète de défilement en 3D en direct.

Le budget

Il existe cinq techniques : une vidéo héros en arrière-plan, un mouvement lié au défilement, une section épinglée, une profondeur de parallaxe et un objet 3D en direct. Utilisez la vidéo héros en arrière-plan et au maximum deux des quatre autres. Une page qui les utilise toutes ressemble à une démo, fatigue le visiteur et affaiblit chaque effet.

Avant d'écrire du code, parcourez la page et demandez-vous pour chaque emplacement : le mouvement rendrait-il quelque chose plus clair, ou ferait-il ressentir quelque chose de spécifique au visiteur ? Indiquez ce que vous allez ajouter, où, ce que cela apporte et ce que cela coûte. Si l'utilisateur en demande plus après en avoir déjà deux, soyez clair sur le compromis : poids supplémentaire et moins d'impact pour ceux déjà présents.

Garde-fous pour chaque technique

La décoration n'est jamais autorisée à faire tomber la page avec elle.

• Mouvement réduit. Sous prefers-reduced-motion: reduce il n'y a pas d'épingle, pas de scrutation et pas de téléchargement 3D. Affichez une mise en page empilée normale ou une image fixe. Cela couvre également le défilement fluide et les transitions, et le mouvement piloté par script nécessite sa propre vérification matchMedia car il n'obéit pas au CSS.
• Tactile. Vérifiez avec le défilement au doigt : pas de sauts, pas de débordement horizontal, pas de pièges de défilement.
• Petits écrans. En dessous de 768px, remplacez la 3D par une image fixe.
• Chargement différé. Chargez le code de l'effet lorsque sa section s'approche de la fenêtre, jamais lors du chargement initial.
• Échec. Si l'effet échoue ou si WebGL est absent, l'image fixe reste et le reste de la page fonctionne.
• Chiffres véridiques. Un compteur animé ne doit jamais reposer sur une valeur fausse. Animez la présentation, pas les données.
• Versions. Vérifiez la documentation actuelle pour GSAP, Three.js, React Three Fiber et Lenis ainsi que leurs versions compatibles. Demandez avant d'installer chaque package.

Recettes

Vidéo héros en arrière-plan

• Un élément video avec autoplay, muted, loop, playsinline et un poster. Les téléphones ne lisent automatiquement que les vidéos muettes et intégrées.
• Le poster (hero-poster.webp) s'affiche en premier, afin qu'il n'y ait pas de cadre vide pendant le téléchargement de hero.mp4.
• Pour la lisibilité, placez un voile dégradé uniquement sous le bloc de texte. Assombrir tout le clip va à l'encontre de son intérêt. Le titre doit être lisible en quelques secondes.
• Éloignez le texte du sujet focal du clip. Décidez cela séparément pour le bureau et le téléphone.
• En mode mouvement réduit, affichez le poster et ignorez la lecture automatique.

Histoire épinglée (pinned scroll story)

• La section se fige lorsque son sommet atteint le haut de la fenêtre, parcourt environ trois étapes au fur et à mesure que le défilement continue, puis se libère. Le défilement vers le haut la joue en arrière.
• Chaque étape est un chiffre surdimensionné, un titre court et une phrase de vrai contenu.
• Construisez-la avec GSAP ScrollTrigger (pin et scrub) à l'intérieur de gsap.matchMedia() afin qu'elle n'existe que lorsque le mouvement est autorisé et qu'elle se nettoie après elle-même.
• Rédigez le balisage comme des étapes empilées simples. Sans script en cours d'exécution, ce balisage est déjà le repli.
• L'épingle est la technique la plus susceptible de mal se comporter sur les téléphones. Demandez un test au pouce sur un appareil réel, et dites-le si aucun n'a été effectué.

Un accent 3D procédural

• Un seul petit objet, placé une fois, à côté du contenu de la section. Construisez la géométrie dans le code à partir de primitives, en partant d'une description verbale de la forme. Pas de fichiers de modèles téléchargés sauf si l'utilisateur le demande.
• Une rotation lente au repos plus une légère inclinaison pilotée par le défilement. Les matériaux et l'éclairage proviennent du système de design, éclairés comme une photo de produit en studio.
• Le conteneur commence par une image fixe de l'objet. Le canvas ne la remplace qu'après le chargement et le montage du code 3D.
• Chargez uniquement à 768px et plus, lorsque le mouvement est autorisé et que la section est près de la fenêtre. Mettez le rendu en pause lorsque l'écran est hors champ et limitez le rapport de pixels de l'appareil à 2.

Vidéo pilotée par le défilement

• Un court clip dont la tête de lecture suit la position de défilement dans les deux directions. Il donne un effet de « produit qui se démonte » pour beaucoup moins d'octets qu'une 3D en direct.
• Réencodez d'abord pour que chaque image soit une image clé, avec l'audio supprimé et le clip réduit aux secondes qui bougent. Visez environ 1 Mo ou moins.
• Épinglez la section et mappez la progression du défilement à video.currentTime. Marquez l'élément muted et playsinline, et n'appelez jamais play() dessus.
• Révélez les légendes textuelles en séquence à partir de la même valeur de progression. Libérez l'épingle rapidement.
• En mode mouvement réduit, affichez l'image fixe la plus informative.

Mesurez ce que cela a coûté

Après avoir ajouté une technique, comparez la taille de transfert avant et après et rapportez un court tableau avec les fichiers touchés et les packages ajoutés. Si quelque chose est lourd, allégez-le. Si cela reste lourd, retirez-le.