Laat een echte browser de echte pagina scrollen en leg dat frame voor frame vast. Dat kan met Playwright en ffmpeg, allebei gratis. Je krijgt een opname van je site zoals hij is, in plaats van een gelijkende animatie.
Waarom niet gewoon een schermopname.
Een gewone schermopname loopt in wandkloktijd. Je scrollt met de hand, dus het schokt, en je krijgt de laadfase mee. Doe je het frame voor frame, dan bepaal jij elke tussenstand. De scroll wordt vloeiend, elke clip is exact even lang, de lus sluit netjes.
De val waar iedereen in trapt.
Tussen twee frames zit ongeveer een vijfde seconde echte tijd, maar in de video duurt dat een zestigste. Alles wat op de klok loopt raast dus ruim tien keer zo snel door beeld. De slider in de hero, een aftelklok bij een actie, een logobalk die langsschuift. De opname ziet er dan onrustig uit zonder dat je aan kunt wijzen waarom.
- zet vlak voor de opname alle lopende animaties op hun eindstand en pauzeer ze
- wis de intervallen, want daar hangen sliders en aftelklokken aan
- laat requestAnimationFrame met rust: parallax hangt aan de scrollpositie, niet aan de klok
- controleer het door twee frames uit het stilstaande kopstuk te vergelijken; die horen pixel voor pixel gelijk te zijn
Poortjes indruk je, die poets je niet weg.
Een cookiebanner of leeftijdscheck weghalen lijkt het snelst, maar dan neem je een pagina op die op slot zit. Widgets achter de toestemming laden niet, en bij een leeftijdscheck blijft de pagina vervaagd en scrollt hij niet eens.
- klik op accepteren, net als een bezoeker doet
- wat je wél weghaalt zijn zwevende chatknoppen, want die staan vijf seconden lang stil in dezelfde hoek
- en let op wat er in beeld staat: personeel met foto, mailadres of telefoonnummer hoort niet op andermans marketingpagina
Zestig beelden per seconde, niet dertig.
Bij scrollende tekst volgt je oog de letters, en dan valt elke overgeslagen tussenstand op als schokken. Verdubbelen kost opnametijd. Breng tegelijk de uitvoerbreedte terug naar de maat waarop de clip echt getoond wordt. Dan wordt het bestand er niet groter van. Bij ons werden de clips zelfs kleiner.
De reden om het zo te doen is niet de prijs. Een nagemaakte site als bewijs van een gebouwde site is geen bewijs.