Mouvement

Logotype animé - machine à écrire au défilement

Le logotype de la nav du site se contracte au défilement : la marque reste en place tandis que les six lettres du logotype s'effacent de droite à gauche, ne laissant que la marque. Revenir en haut de page les fait réapparaître de gauche à droite. Les deux délais sont sensibles à la direction - le délai de transition de chaque état régit l'animation VERS cet état, si bien que l'escalier s'inverse correctement.

• Propriété : opacity sur chaque tracé .logo-letter (la géométrie de la marque ne bouge jamais).
• Durée : 140 ms par lettre (ease).
• Décalage sortant (défilé) : avance de 280 ms pour que la transition de verre / couleur de la nav arrive en premier, puis +100 ms par lettre de droite à gauche (positions 6 → 5 → 4 → 3 → 2 → 1 à 280, 380, 480, 580, 680, 780 ms).
• Décalage entrant (retour en haut) : base à 0 ms, puis +100 ms par lettre de gauche à droite (positions 1 → 2 → 3 → 4 → 5 → 6 à 0, 100, 200, 300, 400, 500 ms).
• Mouvement réduit : respecte prefers-reduced-motion: reduce - les lettres basculent entre les états sans décalage.

Live demo

Appuyez sur le bouton pour replier / déplier le logotype. Reproduit ce que fait la nav du site au-delà de 8 px de défilement.