Beweging

Logocombinatie - typemachine bij het scrollen

De logocombinatie in de sitenavigatie krimpt tijdens het scrollen: het beeldmerk blijft staan terwijl de zes letters van het woordmerk van rechts naar links vervagen, tot alleen het beeldmerk overblijft. Scroll je terug naar boven, dan worden ze van links naar rechts weer ingetypt. Elke richting heeft een eigen vertraging: de transition-delay van een toestand bestuurt de animatie náár die toestand, zodat de stagger netjes omkeert.

• Eigenschap: opacity op elk .logo-letter-pad (de geometrie van het merk beweegt nooit).
• Duur: 140ms per letter (ease).
• Uitgaande stagger (gescrold): 280ms voorsprong zodat de glas- en kleurovergang van de navigatie eerst landt, daarna +100ms per letter van rechts→links (posities 6 → 5 → 4 → 3 → 2 → 1 op 280, 380, 480, 580, 680, 780 ms).
• Inkomende stagger (terug naar boven): 0ms als basis, daarna +100ms per letter van links→rechts (posities 1 → 2 → 3 → 4 → 5 → 6 op 0, 100, 200, 300, 400, 500 ms).
• Beperkte beweging: respecteert prefers-reduced-motion: reduce - letters springen tussen toestanden, zonder stagger.

Live demo

Tik op de knop om het woordmerk in of uit te klappen. Dit is precies wat de sitenavigatie doet zodra je voorbij 8 px scrolt.