30 yhden sivun sivustot, jotka toivotte olisit rakennettu
Kun web-käyttäjät pommitetaan niin paljon tietoa, web-suunnittelijat tutkivat jatkuvasti uusia tapoja toimittaa sisältöä. Yhden sivun verkkosivustoja käytetään laajalti joidenkin maailman suurimpien brändien avulla, ja ne tarjoavat käyttäjille nopean, puhtaan ja yksinkertaisen kokemuksen, joka on samalla tehokasta ja kaunista.
Viime vuosien aikana olemme nähneet, että HTML5- ja jQuery-sovellusten käyttöönoton ansiosta trendisivut kohti yhden sivun verkkosivustoja kasvavat, mikä helpottaa upeita verkkosivustoja, joissa on upeita siirtymiä ja tehosteita.
Alla on 30 upeaa yhden sivun HTML5-verkkosivustoja, jotka kattavat kaiken minimalistisesta suunnittelusta ja yksinkertaisesta navigoinnista parallaksin vieritykseen. Jos etsit inspiraatiota uudelle sivusi HTML5-sivustolle, tutustu alla olevaan luetteloon:
1. Trionn Design
Voitettuaan useita palkintoja Trionn Designin yhden sivun HTML5-verkkosivusto käyttää parallaksia vierittämällä, jotta käyttäjät voivat helpommin selata sivustoa. Tämä reagoiva muotoilu käyttää houkuttelevia kuvia käyttäjien pitämiseen, ja siinä on myös hienoja CSS-tehosteita.
2. Oakley Airbrake MX
Oakley on luonut tämän viihdyttävän ja silmään tarttuvan sivuston, joka yhdistää parallaksen rullauksen ja hämmästyttävän valokuvan esittelemään uusia Airbrake MX -tyyppisiä suojalaseja ainutlaatuisella tavalla.
3. Vieritä terveyttäsi
Paitsi että tämä sivusto on upea, mutta se tarjoaa myös hyödyllistä tietoa "viidestä päivästä" kannustaen kävijöitä syömään enemmän hedelmiä. Sivusto käyttää fiksuja parallaksia vierittämällä kirkkaaseen, lähes videomerkintään.
4. Laura Baffari
Graafinen suunnittelija Laura Baffari on luonut upean interaktiivisen salkun, joka käyttää horisonttia ja koskettaa pyyhkäisyä älypuhelimille ja tabletteille. Sivustoon saapumisen yhteydessä näet laatoja, joissa näkyy hänen työnsä, jota voi selata mihin tahansa suuntaan.
5. Pati & Felipe
Tämä on kaikille romanttisille. Tämän on oltava ainutlaatuisin tapa vahvistaa läsnäolosi häihin. Kaunis tarina pariskunnasta, joka tavannut useita vuosia sitten, tällä sivustolla käytetään parallaksia vierittämällä hienolla animaatiolla ja kekseliäisellä typografialla.
6. Ian James Cox
Toinen salkku, joka on suunniteltu antamaan inspiraatiota, freelance-digitaalinen suunnittelija Ian James Cox on luonut kekseliäisen, kaksisuuntaisen vaikutelman yhden sivuisen verkkosivuston, joka perustuu Duffy Bold -fonttiin ja suosittuun Scroll Path jQuery -laajennukseen.
7. Air Jordan 2012
Jalkineiden asiantuntijat Nike loi mielenkiintoisen verkkosivuston Air Jordan 2012: lle. Jalkineiden ympärille rakennettu sivusto käyttää parallaksia vierittämään kävijöitä luomalla kouluttajan ja materiaalien, joita se on koottu.
8. Oma Pizza-uuni
Pizza fanaatikko Renato on luonut tämän houkuttelevan sivuston pizzajuhliiketoimintaansa. Paitsi, että tämä sivusto tekee sinusta nälkäisen, mutta graafisten elementtien käyttö koko sivulle lisää mukavan kosketuksen.
9. Marty.com
Created by Martin Ringlein, Design Manager Twitterissä, tämä yhden sivun muotoilu on todella ainutlaatuinen. Käytä alareunassa olevia nuolia asettaaksesi kuvaesitykset liikkeessä ja katso, mitä Martin on tehnyt vuodesta 1999 lähtien. Jos etsit inspiraatiota alkuperäisestä navigoinnista, tarkista tämä sivusto!
10. Smart Phood
Smart Phood on tutkimushanke siitä, miten ihmiset syövät. Tämä värikäs HTML5 yksi-hakulaite on ainutlaatuinen vieritys, joka antaa sille "wow" tekijä.
11. numéro10
En voi kuvitella, kuinka paljon työtä on mennyt tämän yhden sivun verkkosivuston luomiseen. Se käyttää parallaksia vierittämällä ja kuumia uskomattomia siirtymiä ja graafisia elementtejä, joita et todennäköisesti näe missään muussa sivustossa. Yksinkertaisesti henkeäsalpaava!
12. Saucony Kinvara 3
Erinomainen interaktiivinen kokemus parallaksen rullauksesta ja uskomattomista siirtymistä ja vaikutuksista, jotka osoittavat kengän koko matkan yhteen.
13. Pi's Epic Journey
Tämä yksi hakulaite on eepos kuin elokuva itse. Se on upea HTML5-parallaksin vierityspaikka, joka vie takana olevat näytöt katsomaan joitain elokuvan parhaita hetkiä.
14. Uusi Skoda Octavia
Uusi Skoda Octavan omistettu HTML5-sivusto kutsuu kävijöitä näkemään sen innostavan animaation kautta. Tämä upea yksi hakulaite käyttää parallaksia vierittämistä ja ainutlaatuista navigointityyppiä, joka luo kiehtovaa kokemusta.
15. Jokainen viimeinen pudotus
Informatiivinen verkkosivusto, joka ottaa syvällisen tarkastelun siitä, kuinka paljon vettä keskimääräinen henkilö kuluttaa joka päivä Yhdistyneessä kuningaskunnassa. Sivusto käyttää graafisia elementtejä ja siirtymiä kipinä keskusteluun tärkeässä asiassa.
16. Reverend Danger
Reverend Danger käyttää tyylikkäästi samanlaisia kuin Minecraft, jolla on erilaisia animaatio- ja CSS-tekniikoita. Tämä yksi hakulaite yhdistää mielenkiintoisen liukusäätimen yläosassa, jossa kävijät voivat muuttaa kuvia "kunnioitusta vaaroihin".
17. Festa Italiana
Festa Italiana on toinen hauska sivusto, joka käyttää kirkkaita värejä ja graafisia elementtejä, jotka liikkuvat vierittämällä.
18. Aktivoi
Sammuta jano sivustolla Activate. Kun vierität sivuston alaspäin, saat napsautettavat kelluvat pullot. Sivustolla on erinomaisia siirtymiä ja vaikutuksia kaikkialla.
19. D'Angelico-kitarat
D'Angelicon kitarat olivat monien omaksuneet ja pysyivät suosittuja 70-luvulle saakka. Nyt legenda syntyy uudestaan hämmästyttävällä HTML5-hakulaitteella, joka hyödyntää äänen ja parallaksen rullausta ja vie sinut läpi matkan.
20. Yrityksen omistaja 2013
Yksinkertainen tavoite perinteisen infografian perinteisestä käsitteestä, tämä HTML5-sivun sivusto tuo tilastoja raportista, joka paljastaa kriittiset tekijät pienten ja keskisuurten yritysten menestymiselle vuonna 2013. Selaa alaspäin nähdäksesi tilastotietoja paljastettavat siirtymät ja vaikutukset.
21. Marco Rosella
Fantastinen yhden sivun salkun sivusto HTML5: ssä zoomattavalla käyttöliittymällä, jonka SVG tarjoaa.
22. Jules Bassoleil
Jules Bassoleilin yksittäissivussalkku on hämmästyttävän looginen ja tehokas navigointi, jossa grafiikka hyppää sinuun.
23. Sergio Pedercini
Italian web-suunnittelija Sergio Pedercini on luonut tyylikkään sivuston, joka näyttää hänen salkkunsa. Kirkkaat värit ja pomppiva navigointi tekevät siitä houkuttelevan ja helppokäyttöisen.
24. VonDutch
Muotilappu Von Dutchin käyttäminen parallaksen rullaukseen lisää sen tarinan liikkeen tunnetta. Kuvakkeet ja kuvat liikkuvat sisään ja ulos paikoilta, kun vierität sivua alaspäin, mikä antaa nestekokemuksen.
25. CoolApps
Yksinkertainen mutta silti houkutteleva HTML5-yksi hakulaite, joka käyttää animaatiota tarjoamaan suurta kelluvaa vaikutusta.
26. Pixelmess
Horisontaalinen vieritys on melko yleistä Creative Agency -Web-sivustoilla, ja Pixelmessin sivusto on esimerkki siitä, että se toimii erityisen hyvin. Retrokirjoitusten ja kuvitusten yhdistelmä tekee sinusta tuntuu, että pelaat vanhan koulun videopeliä, joka on entistä kiinnostavampi.
27. Renault Zoe
Renault käyttää parallaksen vierityksen, äänen ja videon yhdistelmää luodakseen interaktiivisen ja hämmästyttävän kokemuksen vierailijoille.
28. Officeline Lei
Tämä on yksi parhaista tuotesivustoista, joita olen nähnyt viime aikoina. Parallaaksen vierittäminen sivustoon, joka on suunniteltu erityisesti naisille suunnattuihin kääntyviin tuoleihin.
29. All-N-1: n kauneuden talo
Tämä reagoiva HTML5-yksi hakulaite sisältää nesteen ulkoasun, joka sisältää useita vuorovaikutteisia elementtejä ja animaatioita, jotka tekevät siitä entistä miellyttävämmän.
30. Kinderfotografie Evi Hermans
Lasten valokuvaaja Evi Hermans on luonut tämän hauskan ja leikkisä yhden sivun verkkosivuston. Paitsi, että kuvat ovat ihania, mutta tämä kaunis sivusto on entistä interaktiivisempi animaatioiden avulla.
Haluatko, että olet rakentanut nämä sivustot? Oletko rakentanut paremman? Kerro meille kommentit.