/* * De onthulanimatie. * * De beginstand van alles wat met een `blogOnthul` in beeld komt zodra het in * beeld gescrold wordt. Gedeeld door home.css en single.css: het blogoverzicht * onthult zijn kaarten en panelen, het artikel zijn tussenkoppen, het * schrijversblok en de kaarten onder "Verder lezen". * * De beginstand staat hier en niet in JavaScript, want een element dat pas ná * het inladen van een script op opacity 0 gezet wordt, is eerst even zichtbaar * en knippert dan weg. `jsAan` komt van een regel in de (zie * samitAssets::jsVlag), dus zonder JavaScript is er geen beginstand en staat * alles er meteen. * * Het vangnet erin: draait het script wel maar animeert het niet — Motion niet * ingeladen, een fout in home.js of single.js — dan komt de inhoud na 2,5 * seconde alsnog in beeld. Een animatie die niet loopt mag nooit betekenen dat * er niets staat. Wat het script wél onthult, verliest de klasse en dus ook dit * vangnet. */ .jsAan .blogOnthul { animation: blogOnthulVangnet 400ms ease 2.5s forwards; opacity: 0; } /* * En zodra het script draait én kan animeren, gaat het vangnet eruit. Dat is * niet alleen opruimen: zou het blijven staan, dan is een kaart onder de vouw na * 2,5 seconde al in beeld gezet, en komt hij bij het scrollen nóg een keer * opzetten. Eén van de twee moet de baas zijn, en dat is het script — als het er * is. */ .jsAan.blogOnthulActief .blogOnthul { animation: none; } @keyframes blogOnthulVangnet { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .jsAan .blogOnthul { animation: none; opacity: 1; } } /* * Op papier is er geen scrollpositie en dus geen moment waarop iets in beeld * komt. Zonder deze regel drukt een browser alles onder de vouw af op opacity 0 * — lege vlakken op een blad. */ @media print { .jsAan .blogOnthul { animation: none; opacity: 1; } }