559 animaties, componenten, paginasecties en complete websiteontwerpen, elk met live demo en code. Zet wat je mooi vindt in je selectie en stuur hem op; wij bouwen je site eromheen.
Alle items zijn door NedDev ontworpen en geschreven. Je mag ze gratis gebruiken in je eigen projecten en die van je klanten; doorverkopen als bibliotheek of templatepakket mag niet.
Complete homepages voor echte soorten bedrijven: van aannemer en advocaat tot restaurant, webshop en SaaS. Elk ontwerp heeft een eigen visueel systeem uit de branche zelf, echte navigatie, dichte inhoud en een volledige footer, zoals een bureau het zou opleveren.
Homepage voor een verbouwbedrijf in Delft: voor-en-na-schuif als hero over de volle breedte, signaalgeel met kobalt en zwart-witfoto's, diensten met prijs in een lijst naast één groot beeld, projectmozaïek met review ertussen, postcodecheck voor het werkgebied en een opnameformulier.
Homepage voor een installateur: het toestel groot op een lavendelgrijs vlak, een rekenhulp die de besparing in een gewone zin uitrekent, drie oplossingen als grote productvlakken, gemeten gasverbruik van buren en onderhoudscontracten.
Losse pagina's die elk één taak hebben: een landingspagina voor een advertentie, een over-ons-pagina die vertrouwen geeft, een contactpagina, een prijzenpagina en een vacature. Elk voorbeeld is volledig ingevuld voor een echt soort bedrijf en heeft een live demo op volledig scherm.
Ads-landingspagina voor een installateur: de keuzehulp is de hero en rekent direct uit of een hybride of volledig elektrische warmtepomp past, met prijs na subsidie. Daarna één offerteformulier, reviews met naam en wijk, keurmerken, FAQ en foto's in duotoon.
Landingspagina voor een gratis kennismakingsgesprek bij een administratiekantoor: belofte links, een formulier van drie velden rechts, daarna de klanten in beeld, de twee mensen die u spreekt, vaste prijzen, reviews, FAQ en hetzelfde formulier onderaan nog eens.
Complete blokken waarmee je een pagina opbouwt: navigatie, hero, diensten, prijzen, reviews, team, contact, cookiebanner en footer. Elk voorbeeld is voor een andere branche ingevuld, zodat je ziet hoe het voelt met echte inhoud in plaats van opvultekst.
Symmetrische navbar met het woordmerk in het midden, links aan beide kanten en het telefoonnummer als knop, boven een schermbrede foto met de kop linksonder. Mobiel opent een menupaneel. Past bij horeca en winkels met een sterk woordmerk.
Navbar waarvan "Diensten" een megamenu opent (hover of klik): per vakgebied een regel met diensten en vanafprijzen, rechts een klantcase met foto. Daaronder een lage fotoband met de kop eronder. Voor installateurs en andere dienstverleners met veel diensten.
De hero is het eerste wat een bezoeker ziet en bepaalt binnen een paar seconden of iemand blijft. Hier staan openingen die meer doen dan een foto met een kop: beweging, typografie en interactie die laten zien wie je bent.
Hero met een foto die in 26 seconden langzaam inzoomt en verschuift (Ken Burns), met tekst erover en een pauzeknop rechtsonder, nodig voor WCAG 2.2.2 bij beweging langer dan 5 seconden. Pure CSS: transform-animatie plus animation-play-state via :has() op een echte checkbox. Bij reduced motion staat het beeld stil en verdwijnt de knop. Werkt in elke browser.
[ Interieurbouw · Zaandam ]
Korte preloader (circa 1 s) met teller 000 tot 100, waarna het grote woordmerk naar zijn plek in de header schuift en de hero vrijkomt. Speelt één keer per sessie (sessionStorage, met try/catch), daarna direct de pagina; knop "Opnieuw afspelen" toont hem weer. Logo-verhuizing is een FLIP-animatie met de Web Animations API. Bij prefers-reduced-motion geen teller of beweging. Koppel de teller in productie aan het laden van de hero-afbeelding.
Bewegende typografie trekt de aandacht naar de woorden die ertoe doen: een kop die per letter binnenkomt, een getal dat optelt, een woord dat wisselt. Gebruik het spaarzaam, op één of twee plekken per pagina, dan blijft het een accent en wordt het geen kermis.
BOUWEN WIJ
Van kelder tot nok bouwen wij, in Leiden, Alphen en Katwijk.Vier regels grote tekst schuiven, schalen en kleuren mee met de scroll binnen een eigen vlak. Voor een merkverhaal of de opening van een projectpagina.
Na de opname ontvangt u binnen twee werkdagen een offerte met een vaste prijs. Daarin staat precies welk materiaal we gebruiken, hoeveel dagen we nodig hebben en wanneer we kunnen starten. Meerwerk bespreken we altijd eerst met u, nooit achteraf op de factuur.
Een markeerstift loopt woord voor woord door de tekst, in leestempo, met afspeelknop en snelheid. Voor uitleg die je samen met audio of video aanbiedt, of om lange tekst prettig te laten lezen.
Twee lopende banden die vertragen als je erover hovert en die je met de muis of vinger kunt wegslingeren; de snelheid zakt daarna rustig terug. Voor USP's en keurmerken.
Scroll-effecten vertellen een verhaal terwijl de bezoeker naar beneden gaat: beelden die openschuiven, tekst die zich onthult, secties die vastplakken en wisselen. Goed ingezet maken ze een lange pagina lichter om te lezen.
Blog · Verduurzamen
Hybride warmtepomp in een jaren-30-woning: waar let je op?
Een jaren-30-woning heeft vaak mooie details, maar ook enkel glas in de bovenlichten, een spouw die soms al is gevuld en soms niet, en radiatoren die op hoge temperatuur zijn berekend. Dat zijn precies de punten die bepalen of een hybride warmtepomp lekker draait.
1. Begin bij de schil
Laat eerst de spouw controleren. Een gevulde spouw en isolatie onder de vloer halen in een gemiddelde tussenwoning al snel 300 tot 500 m³ gas per jaar weg. Daarna kan de warmtepomp met een lagere watertemperatuur toe.
2. Kijk naar je radiatoren
Zet de cv-ketel een week op 55 graden. Blijft het in elke kamer warm genoeg, dan is je huis klaar voor een hybride systeem. Koud in de achterkamer? Dan helpt vaak één grotere radiator al.
3. Plek voor de buitenunit
De unit hangt het liefst aan de achtergevel of op een plat dak, minstens een meter van de erfgrens. Een monteur meet het geluid vooraf, zodat je zeker weet dat je binnen de regels blijft.
4. Subsidie en terugverdientijd
Met de ISDE-subsidie en een lager gasverbruik verdien je een hybride warmtepomp in een jaren-30-woning meestal in zeven tot negen jaar terug. Vraag twee offertes aan en vergelijk het vermogen, niet alleen de prijs.
Einde artikel. Vragen? Bel 010 123 4567.
Dunne voortgangsbalk bovenin een artikel, aangestuurd door CSS animation-timeline: scroll() zonder enige JS voor de balk, met een kleine JS-fallback voor browsers zonder scroll-driven animations (zoals Firefox). De balk zit in een sticky strook met de titel en hoeveel minuten je nog leest. Draait hier in een eigen scrollvlak; op een echte pagina gebruik je scroll(root).
Scroll naar beneden
Tegelwerk dat dertig jaar meegaat.
Badkamers, keukens en vloeren in Rotterdam en omgeving. Je krijgt één vast aanspreekpunt en een planning per dag.
Nog één stukje, dan zie je de footer onder de pagina vandaan komen.
Bakker Tegelwerken
WerkplaatsIndustrieweg 14
3044 AS Rotterdam
Contact010 123 4567
info@voorbeeld.nl
GegevensKvK 12345678
btw NL001234567B01
De footer ligt vast onderin (position: sticky; bottom: 0) achter de inhoud, de pagina schuift er aan het eind van af. Puur CSS, geen JS en geen nieuwe features nodig: werkt in elke huidige browser. In dit demovlak scrollt een eigen container; op een echte site zet je de sticky footer direct na je main.
De knop is waar een bezoeker klant wordt, dus hij moet opvallen zonder te schreeuwen. Hier staan knoppen met een reactie op hover en klik: een glans, een magnetisch effect, een bevestiging na kopiëren.
De knop vult zich tijdens het versturen met een oranje balk en een oplopend percentage, en rolt daarna door naar een bevestiging met vinkje. Voor offerte- en contactformulieren.
Een regel wordt doorgestreept en klapt weg, waarna een melding met aftelring vijf seconden de kans geeft om het terug te zetten. Voor agenda's, winkelmandjes en beheerschermen.
8 vacatures bij De Vries Installatietechniek
Amersfoort en omgeving · bijgewerkt di 7 okt
Staat je functie er niet bij? Mail je cv naar werken@voorbeeld.nl.
Knop die pas verschijnt als je een flink stuk gescrold hebt, met een ring rond de pijl die laat zien hoe ver je bent. Brengt je soepel terug (direct bij prefers-reduced-motion) en zet de focus daarna op de kop, zodat toetsenbordgebruikers niet verdwalen. Kleine JS, geen nieuwe browserfeatures nodig.
Navigatie moet je niet opvallen, maar wel prettig voelen: een menu dat soepel opent, tabs die laten zien waar je bent, links die reageren als je erover beweegt. Kleine details die een site afgewerkt laten voelen.
Vaste prijs vooraf, één aanspreekpunt en oplevering op de afgesproken dag.
Rotterdamseweg 212, Delft · 015 123 4567 · info@voorbeeld.nl
Vijf oranje banen sluiten gestaffeld over de pagina, de inhoud wisselt en de banen trekken weer op. Voor een site die als één geheel moet voelen.
Wonen aan het water, ontworpen voor honderd jaar.
Kade 14, Leidenstudio@voorbeeld.nl
Het menupaneel rolt van boven open en elke link schuift apart uit een masker omhoog, met teller en contactregel. Voor sites met een klein, krachtig menu.
Diensten
Ontwerp, vergunning en directievoering onder één dak.
De oranje markering rekt zich als een magneet naar je cursor uit en klikt vast op het item eronder; laat je los, dan veert hij terug naar de actieve pagina.
Een formulier is vaak de laatste stap voor een aanvraag of aankoop. Duidelijke velden, directe feedback en een bevestiging die je ziet schelen merkbaar in het aantal afhakers.
Een sleepvlak dat oplicht als je bestanden erboven houdt, met per bestand een eigen voortgangsbalk, annuleerknop en klaar-status. Voor offerteaanvragen met foto's en tekeningen.
Het oog in het wachtwoordveld gaat open of dicht en de puntjes ontcijferen zich letter voor letter tot leesbare tekst, en weer terug. Voor inlogschermen en klantportalen.
Updates, back-ups en elke maand 1 uur wijzigingen. Bedragen excl. btw.
Een schakelaar voor maand- of jaarprijs waarbij alleen de letters en cijfers die echt veranderen wegschuiven en de rest op zijn plek glijdt. Voor prijsblokken en abonnementen.
Cijfers overtuigen sneller dan zinnen: het aantal projecten, een score, een planning. Deze componenten maken data leesbaar en geven ze een beetje leven, van tellers en meters tot kalenders en kaarten.
Vier voortgangsvormen in één set: stappen (2 van 4), lineaire balk met label en bedrag, een upload die naar succes of fout gaat, een cirkel en een onbepaalde laadbalk. Animeert naar de waarde zodra hij in beeld komt (IntersectionObserver + CSS-transities), met role="progressbar" en aria-valuenow. Bij reduced-motion staan de waarden direct goed en loopt de laadbalk niet.
Tarieventabel van een fysiopraktijk: klik op een kolomkop om te sorteren (aria-sort, oplopend/aflopend, melding via aria-live), sticky kop, scrollschaduwen die alleen verschijnen als er meer te zien is (background-attachment: local, zonder JS) en in een smalle kolom kaarten met labels plus een sorteerkeuze. Container query op de wrapper, dus het werkt ook in een zijbalk.
Statustijdlijn voor een reparatie, bestelling of offerte-aanvraag: vier stappen (ontvangen, ingepland, onderweg, klaar) met datums, de huidige stap gemarkeerd (aria-current="step", rustige puls die uitgaat bij prefers-reduced-motion) en een uitklapbaar activiteitenlog. Het log gebruikt met ::details-content en interpolate-size voor een vloeiende hoogte (fallback: direct open). Horizontaal op brede tegels, verticaal via een container query op smalle. Met "Volgende status" zie je elke staat, ook afgerond.
Losse bouwstenen die een pagina interactief maken: kaarten die kantelen, carrousels, vergelijkingsschuiven, meldingen en dialogen. Ze lossen elk een concreet probleem op, zoals een voor-en-na laten zien of veel inhoud compact tonen.
Een stapel projectkaarten die bij hover of klik als een waaier opengaat; de kaart onder je cursor komt omhoog. Voor een compact portfolio of recente projecten.
Vijf smalle beeldstroken waarvan de gekozen strook breed openschuift met titel en prijs; de rest toont een verticaal label. Voor accommodaties, collecties of vestigingen.
Een projectkaart die bij hover een timelapse afspeelt; beweeg je horizontaal, dan spoel je door de beelden, met tijdcode en voortgangsbalk. Voor cases met bouwvideo of productdemo.
Bewegende achtergronden en shader-effecten geven een site diepte en een eigen sfeer: een golvend verloop, geribbeld glas, rasterpunten die op de muis reageren. Ze draaien op de grafische kaart en vallen netjes terug op een stilstaand beeld als een apparaat het niet aankan.
Donderdag 23 oktober van 19.00 tot 21.30 uur bij Keukenstudio Eemland in Amersfoort. Met koffie en een ontwerper aan tafel.
Een rustige achtergrond van zachte lichtstralen die vanuit de linkerbovenhoek over een donker vlak vallen en heel langzaam verschuiven, als licht door een raam. Eén fragment-shader in OGL op een driehoek, gepauzeerd buiten beeld, één stilstaand beeld bij minder beweging en een CSS-terugval (conic-gradient) zonder WebGL. Voor de hero van een showroom, galerie of evenement waar de tekst het werk doet.
Kachelbouw Kuipers plaatst houtkachels en inbouwhaarden in heel Overijssel.
Een langzaam stromend kleurveld in oranje, roest en zwart, berekend met gelaagde ruis in een fragment-shader. Als achtergrond voor een hero; zonder WebGL valt het terug op een CSS-verloop.
Dezelfde inhoud kan heel anders voelen afhankelijk van kleur, letter en ritme. Elk thema hier is een klein designsysteem: palet met tokens, lettertypes met schaal, knoppen, formulieren, kaarten en een voorbeeldsectie.
Koel lavendelgrijs met flessengroen en Bevellier met afgeschuinde hoeken: kalm en net iets ongewoon. Brede beeldband bovenaan, kop eronder. Voor interieurbouw, architecten en zorgpraktijken.
Bijna zwart dennengroen met zacht roze en Zodiak met scherpe schreven: als een bos bij schemer. Een groot portret is de hero, de kop staat in de eigen woorden van de maker. Voor bloemisten, wijnbars en ateliers.
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →