🟡 Fronteers
📉 1. Kortere aandachtsspanne van gebruikers: Mensen hebben tegenwoordig een kortere aandachtsspanne en zijn gewend aan constante stimulatie. Animaties kunnen helpen om de aandacht van gebruikers vast te houden en hen betrokken te houden.
🗣️ 2. Communicatie en begeleiding: Animaties kunnen fungeren als een communicatiemiddel tussen de ontwerper en de gebruiker. Ze kunnen helpen om gebruikers intuïtief door een website of applicatie te leiden.
🎉 3. Entertainment en gemak: Animaties kunnen een saaie en repetitieve taak interessanter maken en kunnen het verschil maken tussen een gebruiker die op de website blijft of wegklikt.
⏳ 1. Laadschermen: Laadschermen zijn een veelvoorkomende plek voor animaties. Ze informeren de gebruiker dat de pagina aan het laden is en kunnen tegelijkertijd vermakelijk zijn. Bijvoorbeeld, een animatie van een pizza die wordt gemaakt voor een restaurantwebsite.
🖱️ 2. Hover-animaties: Hover-animaties laten zien dat een element klikbaar is. Voeg kleur of een interessant detail toe om de hover-animatie aantrekkelijker te maken.
🏞️ 3. Hero-afbeeldingen: Hero-afbeeldingen zijn vaak het eerste wat bezoekers zien op een website. Een geanimeerde hero-afbeelding kan helpen om de aandacht van de gebruiker vast te houden en een verhaal te vertellen over het merk.
🔍 4. Micro-interacties: Micro-interacties zijn kleine, maar betekenisvolle details die een vleugje plezier aan het ontwerp toevoegen. Denk aan de hartjes die oplichten op Twitter of de bewegende interactieknoppen op Facebook.
⚙️ 1. Libary of nieuwe features voor animatie:
💡 Brainstormen: Voordat je beslist wat je gaat animeren en hoe, is het belangrijk om te brainstormen. Bespreek ideeën met vrienden, collega's en doorzoek het internet voor inspiratie.
Gebruik animatie om de betrokkenheid van gebruikers te vergroten en een merk uniek te maken. Gebruik het om creativiteit te stimuleren en jezelf op een slimme en grappige manier uit te drukken in verschillende segmenten van de website. Ontwerp de animatie in een stijl die aansluit bij de kern van je doelgroep. Animaties kunnen helpen om bezoekers te informeren of een verhaal te vertellen. Er zijn verschillende softwareopties beschikbaar, afhankelijk van je behoeften en kennisniveau.
At Google I/O 2024,the next step for view transitions: cross-document view transitions for multi-page applications (MPA).
Met view transitions kun je vloeiende "app-like" overgangen tussen webpagina's maken zonder haperingen of onderbrekingen.Cross-document view transitions zorgen voor soepele overgangen tussen verschillende pagina's in een multi-page applicatie. Dit betekent dat je niet je hele webapplicatie hoeft te veranderen in een single-page applicatie.
Een korte samenvatting geven van view transitions binnen hetzelfde document voor single-page applicaties.
Welke benadering of framework je ook gebruikt, het komt neer op één regel JavaScript:
document.startViewTransition.
De browser start document.startViewTransition, maakt automatische maakt foto's van elementen met een speciale CSS-eigenschap. Er wordt een nieuwe snapshot gemaakt van de bijgewerkte elementen, deze snapchots worden geranktschikt in een boom van peusdo-element met behulp van CSS-animations. De oude fotos veranderen geleidelijk van positite en grootte.
View Transitions, namelijk cross-document view transitionsbetekent overgangen tussen verschillende pagina's op dezelfde origin (de combinatie van schema, hostnaam en poort moet hetzelfde zijn). Cross-document betekent navigeren van de ene pagina naar de andere binnen dezelfde website.
Voorbeeld:
- Zelfde Origin: Je kunt overgangen maken tussen pagina's met dezelfde schema, hostnaam en poort.
- Cross-Origin: Je kunt geen overgangen maken tussen pagina's met verschillende origins, zelfs als ze op dezelfde site staan.
Voorbeeld:
- Toegestane Overgang: https://example.com/page1 naar https://example.com/page2 (zelfde origin).
- Niet Toegestane Overgang: https://example.com/page1 naar https://sub.example.com/page2 (verschillende origins).
Eenvoudige Uitleg van Cross-Document View Transitions
- Snapchots Maken:
De browser maakt snapshots van elementen met een unieke view transition naam op zowel de oude als de nieuwe pagina. 2. Update van de DOM:
Terwijl de DOM wordt bijgewerkt, worden de snapshots genomen om de huidige staat vast te leggen.
- Animatie:
De snapshots worden gerangschikt in een boomstructuur van pseudo-elementen. CSS-animaties zorgen ervoor dat deze snapshots vloeiend overgaan van de oude naar de nieuwe staat.
Bij cross-document view transitions hoef je document.startViewTransition niet meer aan te roepen om de overgang te starten. In plaats daarvan wordt de overgang geactiveerd door navigatie van de ene pagina naar de andere binnen dezelfde origin, meestal door een link klik. Er is geen API-aanroep nodig om de overgang te starten.
-
CSS-regel: Gebruik @view-transition om overgangen in te schakelen.
-
Instelling: Zet de navigatie descriptor op auto.
-
Aanpassen van Overgangen:
Nieuwe Evenementen:
- pageswap: Gebeurt vlak voor het laatste frame van de oude pagina wordt gerenderd.
- pagereveal: Gebeurt wanneer de nieuwe pagina voor het eerst wordt gerenderd.
Voorbeelden:
- pageswap:
Gebruik: Voer laatste wijzigingen uit voor snapshots worden gemaakt. Voorbeeld: Geef een specifiek element een view transition naam.
- pagereveal:
Gebruik: Voer JavaScript uit bij het eerste renderen van de nieuwe pagina. Voorbeeld: Pas de presentatie aan op basis van de nieuwe URL.
- Soms wil je wachten met het renderen van een pagina totdat een bepaald element aanwezig is in de nieuwe DOM om flitsen te voorkomen en stabiliteit te waarborgen.
- Meta Tag: Gebruik een meta-tag in de head van je pagina om dit te definiëren. Invloed op Core Web Vitals:
<meta name="view-transition" content="wait-for-element-id">
-
LCP (Largest Contentful Paint): Kan vertraging oplopen door het uitstellen van de weergave.
-
CLS (Cumulative Layout Shift): Kan verbeteren doordat je instabiele tussenliggende layout-toestanden vermijdt.
-
INP (Interaction to Next Paint): Zou niet veel moeten veranderen omdat gebruikers meestal niet interageren tijdens overgangen.
- Speculation Rules API: Gebruik deze API om pagina's vooraf te laden voor snellere laadtijden.
- Snippet: Voeg een snippet toe aan je pagina's om te starten met pre-rendering.
- Vergelijking: Pagina's met pre-rendering presteren beter dan zonder.
<script type="speculationrules">
{
"prefetch": [
{ "source": "list", "urls": ["/page2", "/page3"] }
]
}
</script>
🔴 Wees Voorzichtig met Blocking Rendering!!!
Redenen voor Voorzichtigheid:
- LCP (Largest Contentful Paint): Het kan vertraagd worden, omdat het blokkeren van rendering de tijd vertraagt die nodig is om de belangrijkste inhoud weer te geven.
- Gebruikerservaring: Het doel is om de gebruikerservaring te verbeteren, maar overmatig blokkeren kan leiden tot trage laadtijden, wat de ervaring juist verslechtert.
- Prestatie-implicaties: Blokkeren kan invloed hebben op de algehele prestaties van de pagina, inclusief andere belangrijke * Web Vitals zoals CLS (Cumulative Layout Shift).