30 nettsider du vil ønske du hadde bygget
Med nettbrukere bombardert med så mye informasjon, undersøker webdesignere hele tiden nye måter å levere innhold på. One-siders nettsteder blir nå utbredt med noen av de største merkene i verden som bruker dem til å gi brukerne en rask, ren og enkel opplevelse som samtidig er effektiv og vakker.
I løpet av de siste årene har vi sett utviklingen mot nettsidene vokse takket være introduksjonen til HTML5 og jQuery, noe som gjør det enkelt å bygge flotte nettsteder med ferske overganger og effekter.
Nedenfor finner du 30 fantastiske HTML-websider på én side, som dekker alt fra minimalistisk design og enkel navigering til parallellrulling. Hvis du leter etter inspirasjon for ditt nye enkelttsidede HTML5-nettsted, kan du se på listen nedenfor:
1. Trionn Design
Etter å ha vunnet flere priser, bruker Trionn Designes nettside HTML5 nettsted parallaxrulling for å gjøre det enklere for brukerne å navigere gjennom nettstedet. Denne responsive designen bruker attraktive bilder for å holde brukerne engasjert, og inneholder også noen flotte CSS-effekter.
2. Oakley Airbrake MX
Oakley har skapt dette underholdende og iøynefallende nettstedet, kombinert parallaxrulling og fantastisk fotografering for å presentere de nye Airbrake MX-brillene på en unik måte.
3. Rull deg for helsen din
Ikke bare er dette nettstedet fantastisk, men det gir også nyttig informasjon om "5 om dagen", og oppfordrer besøkende til å spise mer frukt. Nettstedet gjør bruk av smart parallax rulling for en lys, nesten videoaktig følelse.
4. Laura Baffari
Grafisk designer Laura Baffari har skapt en imponerende, interaktiv portefølje som bruker horisontal rulle- og berøringsvev for smarttelefoner og tabletter. Når du går inn på nettstedet ser du fliser som viser arbeidet som kan rulles gjennom i alle retninger.
5. Pati & Felipe
Denne er for alle romantikere der ute. Dette må være den mest unike måten å bekrefte møtet med et bryllup. En vakker historie om et par som møttes for mange år siden, bruker dette nettstedet parallaxrulling med en god animasjon og oppfinnsom typografi.
6. Ian James Cox
En annen portefølje som er bundet til å gi deg inspirasjon, freelance digital designer Ian James Cox har skapt en oppfinnsverdig doodle-effekt en nettside basert på "Duffy Bold" -typen og det populære Scroll Path jQuery-plugin.
7. Air Jordan 2012
Sko-spesialister Nike skapte en fengslende nettside for Air Jordan 2012. Bygget rundt selve fottøyet bruker nettstedet parallaxrulling for å ta besøkende gjennom opprettelsen av trener og materialene som brukes sammen.
8. Min Pizza Ovn
Pizza fanatiker Renato har skapt dette fremtredende stedet for sin pizza fest virksomhet. Ikke bare gjør dette nettstedet deg sulten, men bruken av grafiske elementer over hele siden legger til en fin touch.
9. Marty.com
Laget av Martin Ringlein, Design Manager på Twitter, er dette en-sidedesignet helt unikt. Bruk pilene nederst til å sette presentasjonene i gang og se hva Martin har vært på siden 1999. Hvis du leter etter inspirasjon for en opprinnelig navigasjon, må du sjekke dette nettstedet!
10. Smart Phood
Smart Phood er et forskningsprosjekt om hvordan folk spiser. Denne fargerike HTML5-personsøkeren har en unik rulle som gir den "wow" -faktoren.
11. numéro10
Jeg kan ikke forestille meg hvor mye arbeid har gått inn i å skape denne nettsiden. Den bruker parallaxrulling og masse fantastiske overganger og grafiske elementer som du ikke sannsynligvis vil se på et annet nettsted. Bare fantastisk!
12. Saucony Kinvara 3
En utmerket interaktiv opplevelse med parallaxrulling og fantastiske overganger og effekter for å presentere hele reisen til skoen som kommer sammen.
13. Pi er episk reise
Denne en-personsøker er like episk som selve filmen. Det er et fantastisk HTML5-parallaxrulleområde som tar en bak-scenen titt på noen av de største øyeblikkene i filmen.
14. Ny Skoda Octavia
Den nye Skoda Octavias dedikerte HTML5-webside inviterer besøkende til å oppdage det gjennom en spennende, animert opplevelse. Denne fantastiske en-personsøker bruker parallaxrulling og en unik type navigasjon som skaper en engasjerende opplevelse.
15. Hver siste dråpe
En informativ nettside som tar en grundig titt på hvor mye vann den gjennomsnittlige personen bruker hver dag i Storbritannia. Nettstedet bruker grafiske elementer og overganger til å gnist samtalen på et viktig problem.
16. Reverend Fare
Stylistisk lik Minecraft, bruker Reverend Danger en rekke animasjons- og CSS-teknikker for å skape en morsom opplevelse for besøkende. Denne en-personsøkeren kombinerer en interessant skyveknapp øverst der besøkende kan endre bildene fra "reverend to danger".
17. Festa Italiana
Festa Italiana er et annet morsomt nettsted som bruker lyse farger og grafiske elementer som beveger seg mens du ruller ned.
18. Aktiver
Slokk tørsten din med denne nettsiden av Activate. Når du ruller ned på siden, presenteres du med klikkbare flytende flasker. Siden har noen gode overganger og effekter gjennom hele.
19. D'Angelico gitarer
D'Angelico gitarer ble omfavnet av mange og forblev populære frem til 70-tallet. Nå er legenden gjenfødt med en fantastisk HTML5-personsøker som gjør stor bruk av lyd- og parallaxrulling for å ta deg gjennom reisen.
20. Tilstanden for næringseieren 2013
Et unikt utseende på det populære konseptet av det tradisjonelle infografiske, presenterer denne siden på HTML5, en side, statistikk fra en rapport som viser kritiske faktorer for små og mellomstore bedrifter i 2013. Rull ned for å se overgangene og effektene som avslører statistikken.
21. Marco Rosella
En fantastisk en-siders porteføljeside i HTML5 med et zoombart brukergrensesnitt drevet av SVG.
22. Jules Bassoleil
Jules Bassoleils enkeltportefølje har en utrolig logisk og effektiv navigasjon med grafikken som hopper ut på deg.
23. Sergio Pedercini
Den italienske nettdesigneren Sergio Pedercini har skapt et elegant nettsted for å vise sin portefølje. De lyse farger og den hoppende navigasjonen gjør den attraktiv og enkel å bruke.
24. VonDutch
Motemerket Von Dutchs bruk av parallaxrulling gir en følelse av bevegelse til sin historie. Ikoner og bilder beveger seg inn og ut når du ruller nedover siden, og gir en væskeopplevelse.
25. CoolApps
En enkel, men likevel attraktiv HTML5-personsøker som bruker animasjon for å gi en flott flytende effekt.
26. Pixelmess
Horisontal rulling er ganske vanlig på kreative nettsider, og Pixelmesss nettsted er et eksempel på at det fungerer spesielt godt. Kombinasjonen av retrofonter og illustrasjoner gjør at du føler at du spiller et gammeldags videospill som er enda mer engasjerende.
27. Renault Zoe
Renault bruker en kombinasjon av parallell rulling, lyd og video for å skape en interaktiv og fantastisk opplevelse for besøkende.
28. Officeline Lei
Dette er en av de beste produktpresentasjonene jeg har sett på det siste. Nettstedet bruk av parallax ruller til stede svingstoler spesielt designet for kvinner.
29. All-N-1 House of Beauty
Denne responsive HTML5-personsøkeren har en fluid layout som inneholder flere interaktive elementer og animasjoner for å gjøre det mer engasjerende.
30. Kinderfotografie Evi Hermans
Barnas fotograf Evi Hermans har laget denne morsomme og lekende nettsiden. Ikke bare er bildene nydelige, men dette vakre nettstedet blir enda mer interaktiv gjennom bruk av animasjoner.
Ønsker du at du har bygget disse nettstedene? Har du bygget en bedre en? Gi oss beskjed i kommentarene.