30 One-Page-sites die u zou willen hebben gebouwd
Met webgebruikers gebombardeerd met zo veel informatie, zijn webontwerpers voortdurend op zoek naar nieuwe manieren om content te leveren. Webpagina's van één pagina worden nu op grote schaal gebruikt, waarbij enkele van de grootste merken ter wereld deze gebruiken om gebruikers een snelle, schone en eenvoudige ervaring te bieden die tegelijk effectief en mooi is.
In de afgelopen jaren hebben we de trend naar websites met één pagina zien groeien dankzij de introductie van HTML5 en jQuery, waarmee het gemakkelijk is om verbluffende websites te bouwen met handige overgangen en effecten.
Hieronder vindt u 30 verbluffende HTML5-pagina's met één pagina, die alles omvatten, van minimalistisch ontwerp en eenvoudige navigatie tot parallax-scrollen. Als u op zoek bent naar inspiratie voor uw nieuwe HTML5-website met één pagina, bekijkt u de onderstaande lijst:
1. Trionn-ontwerp
De verschillende pagina's tellende HTML5-website van Trionn Design heeft meerdere parallellen gewonnen en gebruikt parallax-scrollen om het gebruikers gemakkelijker te maken om door de site te navigeren. Dit responsieve ontwerp maakt gebruik van aantrekkelijke afbeeldingen om gebruikers betrokken te houden en bevat ook enkele geweldige CSS-effecten.
2. Oakley Airbrake MX
Oakley heeft deze vermakelijke en opvallende site gemaakt, waarbij parallax-scrolling en verbazingwekkende fotografie worden gecombineerd om de nieuwe Airbrake MX-bril op een unieke manier te presenteren.
3. Scroll naar uw gezondheid
Deze site is niet alleen verbluffend, maar biedt ook nuttige informatie over uw '5 per dag', waardoor bezoekers worden aangemoedigd meer fruit te eten. De site maakt gebruik van slim parallax scrollen voor een helder, bijna video-achtig gevoel.
4. Laura Baffari
Grafisch ontwerper Laura Baffari heeft een verbluffend interactief portfolio gemaakt met horizontale scroll en touch-swipe voor smartphones en tablets. Bij het betreden van de site zie je tegels waarop haar werk staat en waar je in alle richtingen doorheen kunt scrollen.
5. Pati & Felipe
Deze is voor alle romantici die er zijn. Dit moet de meest unieke manier zijn om uw aanwezigheid op een bruiloft te bevestigen. Een prachtig verhaal over een echtpaar dat vele jaren geleden heeft ontmoet, deze site maakt gebruik van parallax-scrollen met een aantal geweldige animaties en inventieve typografie.
6. Ian James Cox
Een andere portfolio die je zeker zal inspireren, freelance digitale ontwerper Ian James Cox heeft een inventieve doodle-effect website met één pagina gemaakt op basis van het lettertype "Duffy Bold" en de populaire jQuery-invoegtoepassing Scroll Path.
7. Air Jordan 2012
Schoeiselspecialisten Nike heeft een boeiende website gemaakt voor de Air Jordan 2012. De site is gebouwd rond het schoeisel zelf en maakt gebruik van parallax-scrolling om bezoekers door de creatie van de trainer en de gebruikte materialen te halen.
8. Mijn pizzaoven
Pizzalief Renato heeft deze aantrekkelijke site gemaakt voor zijn pizzaparty-activiteiten. Niet alleen maakt deze site je hongerig, maar het gebruik van grafische elementen op de hele pagina voegt een leuke toets toe.
9. Marty.com
Gemaakt door Martin Ringlein, Design Manager bij Twitter, dit ontwerp met één pagina is echt uniek. Gebruik de pijlen onderaan om de presentatiediavoorstellingen in beweging te zetten en zie wat Martin al sinds 1999 heeft gedaan. Als je op zoek bent naar inspiratie voor een originele navigatie, kijk dan op deze site!
10. Smart Phood
Smart Phood is een onderzoeksproject over hoe mensen eten. Deze kleurrijke HTML5-one-pager heeft een unieke scroll die hem de 'wauw'-factor geeft.
11. numéro10
Ik kan me niet voorstellen hoeveel werk er is verzet om deze website met één pagina te maken. Het maakt gebruik van parallax scrollen en heel veel verbazingwekkende overgangen en grafische elementen die je waarschijnlijk niet ziet op een andere site. Gewoon adembenemend!
12. Saucony Kinvara 3
Een uitstekende interactieve ervaring met parallax-scrollen en verbluffende overgangen en effecten om de volledige reis van de schoen samen te stellen.
13. Pi's epische reis
Deze one-pager is net zo episch als de film zelf. Het is een verbluffende HTML5 parallax-scrollsite die een blik achter de schermen werpt op enkele van de beste momenten van de film.
14. Nieuwe Skoda Octavia
De nieuwe HTML5-website van de nieuwe Skoda Octavia nodigt bezoekers uit om het te ontdekken via een meeslepende geanimeerde ervaring. Deze verbluffende one-pager maakt gebruik van parallax scrollen en een uniek type navigatie dat een boeiende ervaring creëert.
15. Elke laatste druppel
Een informatieve website die een diepgaand onderzoek doet naar hoeveel water de gemiddelde persoon elke dag in het VK verbruikt. De site maakt gebruik van grafische elementen en overgangen om een gesprek over een belangrijk onderwerp op gang te brengen.
16. Reverend Danger
Stilistisch vergelijkbaar met Minecraft maakt Reverend Danger gebruik van een reeks animatie- en CSS-technieken om een leuke ervaring voor bezoekers te creëren. Deze één-pager combineert een interessante schuifregelaar aan de bovenkant waar bezoekers de afbeeldingen kunnen wijzigen van 'Eerwaarde in gevaar'.
17. Festa Italiana
Festa Italiana is een andere leuke website die felle kleuren en grafische elementen gebruikt die bewegen als je naar beneden scrolt.
18. Activeer
Doof je dorst met deze website door te activeren. Terwijl u door de site scrolt, krijgt u klikbare zwevende flessen te zien. De site heeft overal uitstekende overgangen en effecten.
19. D'Angelico Guitars
D'Angelico gitaren werden door velen omarmd en bleven populair tot in de jaren '70. Nu wordt de legende herboren met een verbluffende HTML5-one-pager die uitstekend gebruikmaakt van geluid en parallax scrollen om je door de reis te leiden.
20. Staat van de bedrijfseigenaar 2013
Deze HTML5-pagina met één pagina biedt een unieke kijk op het populaire concept van de traditionele infographic en bevat statistieken van een rapport dat kritische factoren blootlegt voor klein en middelgroot zakelijk succes in 2013. Scroll naar beneden om de overgangen en effecten te zien die de statistieken onthullen.
21. Marco Rosella
Een fantastische portaalsite van één pagina in HTML5 met een zoombare gebruikersinterface mogelijk gemaakt door SVG.
22. Jules Bassoleil
Jules Bassoleils portfolio met een enkele pagina heeft een verbazingwekkend logische en effectieve navigatie waarbij de graphics naar je uit springen.
23. Sergio Pedercini
De Italiaanse webdesigner Sergio Pedercini heeft een elegante site gemaakt om zijn portfolio te tonen. De felle kleuren en de stuiterende navigatie maken het aantrekkelijk en gemakkelijk te gebruiken.
24. VonDutch
Modelabel Von Hollands gebruik van parallax scrollen voegt een gevoel van beweging toe aan zijn verhaal. Pictogrammen en afbeeldingen worden in- en uitgelijnd terwijl u de pagina afrolt, waardoor u vloeiend kunt werken.
25. CoolApps
Een eenvoudige maar aantrekkelijke HTML5-one-pager die gebruik maakt van animatie om een geweldig zwevend effect te bieden.
26. Pixelmess
Horizontaal scrollen is vrij gebruikelijk op websites van reclamebureaus en de site van Pixelmess is daar een voorbeeld van dat bijzonder goed werkt. De combinatie van retro-lettertypen en illustraties geeft je het gevoel dat je een old-school videogame speelt dat nog boeiender is.
27. Renault Zoe
Renault gebruikt een combinatie van parallax scrollen, audio en video om een interactieve en geweldige ervaring voor bezoekers te creëren.
28. Officeline Lei
Dit is een van de beste productpresentatiesites die ik de laatste tijd heb gezien. De site maakt gebruik van parallax-scrolling om draaifauteuils te presenteren die speciaal zijn ontworpen voor vrouwen.
29. All-N-1 House of Beauty
Deze responsieve HTML5-one-pager heeft een vloeiende lay-out die verschillende interactieve elementen en animaties bevat om hem aantrekkelijker te maken.
30. Kinderfotografie Evi Hermans
Kinderfotograaf Evi Hermans heeft deze leuke en speelse pagina met één pagina gemaakt. Niet alleen zijn de foto's mooi, maar deze prachtige site is zelfs nog meer interactief gemaakt door het gebruik van animaties.
Zou je willen dat je deze sites had gebouwd? Heb je een betere gebouwd? Laat het ons weten in de comments.