BVR Vloerwerken, homepage met scroll-animatie
De homepage van een vloerlegger. Je scrolt, en in een lege kamer wordt de ondergrond geëgaliseerd, de visgraatvloer gelegd en de plint gezet, tot de kamer is ingericht.
BVR Vloerwerken is het vloerenbedrijf van Bart van Rooij, medeoprichter van dGEN Labs. Hij legt PVC-vloeren in Zuid-Nederland, inclusief het egaliseren en de plinten. Dat laatste is precies wat hem onderscheidt: één vakman van kale ondergrond tot de laatste plint. Daarom vertelt de homepage dat verhaal zelf. Bovenaan staat een lege kamer met een kale betonvloer. Terwijl je scrolt, loopt de egaline over de vloer, komt de visgraat strook voor strook naar voren, gaan de plinten erop en richt de kamer zich in. Bij elke stap wisselt de tekst mee en vult een balk bovenin zich.
59 fps Op mobiel, met vier keer tragere processor
De hero in beweging
Een opname van de live site, van boven naar beneden door de hero gescrold.
BVR Vloerwerken: de vloer legt zich terwijl je scrolt
Wat het doet
- Een lege kamer die stap voor stap een complete woonkamer wordt, in het tempo waarin je scrolt
- Vijf stappen in beeld: ondergrond, egaliseren, vloer leggen, plinten en opgeleverd
- Terugscrollen draait alles terug
- Een eigen versie voor desktop en voor de telefoon
- Bij elke stap wisselt de tekst mee en vult een voortgangsbalk zich
- Gemeten op de live site: 60 beelden per seconde op desktop, 59 op mobiel met een vier keer tragere processor
Eén kamer, van kaal tot klaar
Een vloerlegger verkoopt het eindresultaat, maar de klant kiest op het voorwerk. Is de ondergrond goed, wordt er geëgaliseerd, wie zet de plinten? Op deze homepage lees je dat niet alleen, je ziet het gebeuren.
De hero begint in een lege woonkamer met een kale betonvloer. Terwijl je scrolt, blijft het dezelfde kamer, vanaf dezelfde plek, in hetzelfde licht. Alleen de vloer verandert, tot de kamer is ingericht.
Vijf stappen, vijf momenten
De egaline loopt over de vloer, de visgraat komt strook voor strook naar voren, de plinten gaan erop en tot slot richt de kamer zich in. Bij elke stap wisselt de tekst mee: ondergrond, egaliseren, vloer leggen, plinten en opgeleverd. Een balk bovenin laat zien waar je bent.
De bezoeker bepaalt het tempo
Niets speelt vanzelf af. Wie langzaam scrolt, ziet elke strook vallen; wie terugscrolt, ziet de vloer weer verdwijnen. Gemeten op de live site: 60 beelden per seconde op desktop en 59 op een telefoon met een vier keer tragere processor.
Staand voor de telefoon
Op een smal scherm valt bij een liggend beeld de helft van de kamer weg. Daarom is er een eigen staande versie, met dezelfde stappen op dezelfde momenten.
Toepassingen
Vakwerk laten zien
Een klant ziet hoe een vloer ontstaat terwijl hij scrolt, in plaats van alleen het eindresultaat.
Verschil maken met voorwerk
Egaliseren en plinten krijgen een eigen moment, juist het werk dat een klant anders niet ziet.
Elke ambachtsman
Een keuken, een badkamer of een tuin: elk vak met een volgorde past in dezelfde opzet.
Veelgestelde vragen
Kan dit ook voor mijn vak?
Ja. Elk vak met een vaste volgorde past erin: een keuken, een badkamer, een tuin. We beginnen bij de stappen van je werk en eindigen bij het resultaat dat je klant wil zien.
Werkt het ook op een telefoon?
Ja. Er is een eigen staande versie, met dezelfde stappen op dezelfde momenten, zodat de kamer op een smal scherm niet half wegvalt.
Wordt de pagina daar niet traag van?
Nee. Gemeten op de live site: 60 beelden per seconde op desktop en 59 op mobiel, ook met een vier keer tragere processor.
Stack
Website, Scroll-animatie, Mobiel, Desktop
Alle cases of plan een gesprek.
dGEN Productions, AI-bureau in Veldhoven, regio Eindhoven (Brainport), onderdeel van dGEN Labs. De Run 1141 (1e verdieping, nr. 12), 5503 LB Veldhoven · info@dgenproductions.nl · 06-87413056 · KvK 97916137 (eenmanszaak) · btw NL005295840B15