Share
Hvis du ikke har sett Star Wars ennå, så snart du er ferdig med denne artikkelen, kan du se den. Alt av det. (Pass på at du kommer tilbake og gi oss beskjed hvis du foretrekker IV-VI eller I-III.)
Hvis du ha sett Star Wars, kanskje du er litt i løkken på de siste nyhetene om filmserien. J.J. Abrams (produsent av Tapt og nyere, den nyeste Star Trek-serien) skriver og produserer for øyeblikket neste Star Wars, Episode VII, som skal utgis i 2015. I tillegg ble Lucasfilm, hjemmestudioet til Star Wars, kjøpt av Disney.
Sammen med nyheten om Star Wars-sagen, mottok StarWars.com en makeover fra Bobby Solomon og Disney Interactive Team. Mange flotte detaljer har gått inn på dette nettstedet, men vi skal fokusere på noen detaljer som skiller seg ut til oss.
Overskriften til Star Wars-nettstedet er et eksempel på en veldig enkel samhandling som har mye rikere betydning enn den estetiske kjøringen. Spesielt gjenspeiler samspillet åpnings tittelsekvensen for alle Star Wars-filmene. Mens du ruller, ser logoen ut til å bevege seg bort fra deg og falmer ut underveis. Denne enkle detaljer er estetisk attraktiv, og gir en umiddelbar kulturell utløser for filmens fans.
Går… 
Går… 
Borte.Slik gjorde de det.
Først er topptekstbaren og alle dens innebygde elementer faktisk satt til posisjon: fast. En veldig enkel teknikk brukes til å oppnå både parallax-effekten i bakgrunnen og logo-størrelsen. Vi demonstrerer med et forenklet eksempel.
<
I dette tilfellet vil vi bruke følgende CSS.
header posisjon: fast; bredde: 100%; høyde: auto; bakgrunnsfarge: # 000; .nav-indre maks-høyde: 300px; høyde: 300px; stilling: relativ; .nav-wrapper maks-bredde: 1400px; maksimal høyde: 300px; margin: 0 auto; polstring: 1,5%; -webkit-boks-størrelse: border-box; -moz-box-size: border-box; boks-størrelse: border-box; stilling: relativ; høyde: arv; .nav-push margin-top: -65px; stilling: relativ; .bg display: block; posisjon: absolutt; topp: 0; venstre: 50%; bredde: 1600px; høyde: 100%; z-indeks: -1; bakgrunnsposisjon: senter; bakgrunnsbilde: url (http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg); bakgrunnsstørrelse: deksel; transformere: translate3d (0, 0, 0); transformere: translateX (-50%); .logo display: block; topp: 50%; bredde: 100%; maksimal bredde: 350px; høyde: 100%; maksimal høyde: 130px; margin: -65px auto 0; boks-størrelse: border-box; bakgrunnsbilde: url (// a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png); bakgrunnsstørrelse: inneholde; bakgrunnsposisjon: senter; bakgrunn-gjentak: ikke-gjenta; stilling: relativ; main posisjon: relative; topp: 300px; høyde: 600px; bakgrunnsfarge: # 000;
Logoen er sentrert sentrert ved hjelp av denne metoden.
Nå kommer dette trikset. Når brukeren ruller, endrer vi høyden på .nav-indre, så vel som opaciteten av .nav-indre. Dette vil føre til at logoen krympes ned, og høyden på toppteksten vil bli bestemt av høyden av de inneholdte elementene.
Vi kan oppnå dette ved hjelp av en enkel Scroll-polling metode.
Merk: jQuery brukes i dette eksemplet.
Accentsconagua
var latestKnownScrollY = 0, ticking = false, $ w = $ (vindu), $ navInner = $ (".nav-indre"); funksjon onScroll () latestKnownScrollY = $ w.scrollTop (); console.log (latestKnownScrollY); requestTick (); $ w.on ('scroll', onScroll); funksjonsforespørselTick () hvis (! tikkende) requestAnimationFrame (update); ticking = true; funksjonsoppdatering () ticking = false; var currentScrollY = latestKnownScrollY; $ navInner.css (høyde: 300 - nåværendeScrollY, opacity: (300 - currentScrollY) / 300); requestTick ();Dette JavaScript, i kombinasjon med CSS ovenfor, oppnår effekten av topptekstrullen, og gjør det uten å måtte stole på tung DOM-manipulasjon, noe som gjør det litt mer ytelsesfullt.
Ta en titt på den endelige demoen.
Desktop-navet er relativt grei, så vi snakker ikke om implementeringsdetaljer. Men la oss ta en titt på hva som gjør denne naven effektiv: ikonene.
En del av (netthinnen) ikonet spritesheetIkonene er igjen en annen funksjon bygget for å snakke direkte med Star Wars-fans. For eksempel, for "Films" -ikonet, i stedet for å velge et kamera eller en spolebånd, valgte designeren et ikon som representerer rulleteksten som vises i begynnelsen av hver Star Wars-film. For fellesskapsikonet, i stedet for å vise en oversikt over to personer, valgte de å vise en Storm Trooper hjelm. Betydningen av hvert navigasjonsobjekt er forbedret av disse beslutningene for Star Wars-fans, og erfaringen er ikke fortynnet for nykommere.
Et annet viktig ikon for å påpeke er "Søk" -knappen. Selv om det kan virke som et forstørrelsesglass (et vanlig søkikon), er det også en forenklet versjon av en Death Star, en av de viktigste elementene i filmene.
Dette gir et svært viktig poeng om alle ikonene på siden: Som regel valgte designeren å beholde kjente tegn og grunnleggende former, for eksempel et forstørrelsesglass eller en persons disposisjon, men å legge til elementer i de grunnleggende formene som har betydning for de som forstår dem. Dette gir en følelse av leknemlighet og en sann følelse av tematisk integritet gjennom hele nettstedet.
Vi skal dykke litt lenger inn i det som har blitt en av de mest snakket om deler av dette nettstedet: lightsaber navigasjon.
Ved lavere brytpunkter er navigasjonen tilgjengelig via en knapp som er fast øverst til venstre i nettleservinduet. I begynnelsen kan det se ut som en vanlig menyknapp, men når du klikker på den, skifter linjene inn i en X-form og ligner to lightsabers.
Alt dette gjøres ved hjelp av enkle CSS-teknikker og en liten bit av JavaScript. Her er markeringen av menyen:
Den spenner over Bar klassen blir lightabers. Her er en rekreasjon av CSS som brukes til å oppnå effektene:
# nav-skuff-toggle border-right: 1px solid # 333333; bredde: 60px; høyde: 60px; markør: pointer; posisjon: fast; topp: 0; venstre: 50%; margin-venstre: -30px; .toggle-icon display: block; stilling: relativ; topp: 50%; bredde: 100%; margin: -22px auto 0 2px; -webkit-overgang: margin 600ms; -moz-overgang: margin 600ms; overgang: margin 600ms; .bar display: block; bredde: 38px; høyde: 2px; margin: 9px; border-right: 28px solid #fff; border-left: 6px solid # d6d6d6; -webkit-boks-størrelse: border-box; -moz-box-size: border-box; boks-størrelse: border-box; -webkit-overgangseiendom: -webkit-transformere, margin, grense-høyre-farge, boks-skygge; -moz-overgangseiendom: -moz-transformere, margin, grense-høyre-farge, bokseskygge; overgangseiendom: transformere, margin, grense-høyre-farge, bokseskygge; -webkit-overgangsperiode: 600ms; -moz-overgangs-varighet: 600ms; overgangsperiode: 600ms; .bar: nth-of-type (2n) -webkit-transform: roter (-180deg); -moz-transform: roter (-180deg); -ms-transformer: roter (-180deg); -o-transformer: roter (-180deg); transformere: roter (-180deg); / * Toggled states * / .toggled .toggle-icon margin: -32px 0 0 7px; .toggled .toggle-icon .bar: nth-of-type (3) margin-left: 5px; -webkit-transform: roter (-42deg); -moz-transform: roter (-42deg); -ms-transformer: roter (-42deg); -o-transformer: roter (-42deg); transformer: roter (-42deg); .toggled .toggle-icon .bar: nth-of-type (2) margin-left: 14px; -webkit-transform: roter (-137deg) translateY (-15px); -moz-transform: roter (-137deg) translateY (-15px); -ms-transformer: roter (-137deg) translateY (-15px); -o-transformer: roter (-137deg) translateY (-15px); transformere: roter (-137deg) translateY (-15px); .toggled .toggle-icon .bar: nth-of-type (1) opacity: 0; / * Lightsaber glow * / # nav-skuff-toggle.toggled: svever .bar: nth-of-type (3) border-right-color: # ddf1da; boksskygge: 4px 0 6px 1px rgba (83,228,68,0,65); # nav-skuff-toggle.toggled: svever .bar: nth-of-type (2) border-right-color: # e9b8b9; boks-skygge: 4px 0 6px 1px rgba (205,40,44,0,75);
Endelig, litt av JavaScript som bytter nav-tilstanden:
(funksjon () $ ("# nav-skuff-veksle"). ("klikk", funksjon () $ (dette) .toggleClass ("toggled"););Merk: Noen av koden ovenfor ble tatt direkte fra StarWars.com, mens andre brikker ble gjenskapt for å oppnå samme effekt.
Ta en titt på den endelige demoen.
Mens dette er en tilsynelatende enkel teknikk, snakker det til publikum på en mye mer nyansert og rik måte enn en enkel "X" eller hamburger ville.
Designerne av StarWars.com har tenkt på mange tilsynelatende mindre detaljer i deres designprosess. En som jeg vil gjerne påpeke i denne artikkelen er 404-siden.
404 sider glemmes ofte av oss som webutviklere eller designere, fordi vi enkelt kan betrakte dem som en "kanten". Vi synes å glemme dem fordi de ikke er det som er skulle skje, så vi utformer ikke tungt for dem. Imidlertid fortjener 404 sider mye mer oppmerksomhet enn vi kanskje tror. Brukere når 404 sider når de prøver å få tilgang til innhold som ikke lenger er tilgjengelig, eller det er knyttet til eller skrevet feil. Dette øyeblikket i brukeropplevelsen bør utforskes mye mer med vilje.
Når en bruker ikke kommer til en side de prøver å nå, kan det være veldig frustrerende og føre til at brukeren umiddelbart forlater. Men hvis utformingen av 404-siden er slik at den hjelper brukeren og gleder dem til en viss grad, kan deres oppmerksomhet beholdes. I tilfelle StarWars.com, når en bruker besøker en feil adresse (for eksempel http://www.starwars.com/nowhere), presenteres de med en grafisk "404", med en ufullstendig Death Star som står i stedet for null, og meldingen "Denne siden er ikke fullt væpnet og operativ. Prøv noe annet?"
Denne siden er effektiv av to grunner. For det første snakker det en gang til Star Wars-fans direkte; For mye av filmserien ser Death Star ut som den på 404-siden og er i ferd med å bli bygget. Når det er endelig ferdig i slutten av de seks filmene, sier keiseren til Luke:
Nå vitner du om dette i sin helhet bevæpnet og operasjonell kampstasjon!
Dette er et sentralt punkt i filmserien. Designerne til StarWars.com visste at en fan som kom til nettstedet og nå 404-siden, ville trolig huske dette øyeblikket i filmen, og i stedet for å fokusere på frustrasjonen om ikke å nå det de lette etter, kunne de være fornøyd eller distrahert med minne om filmen.
Mens det virker som om det var en ubesvart mulighet til å bruke det beryktede sitatet "dette er ikke de droidene du leter etter", har allvarsenheten til Star Wars ført til mange 404 sider som allerede bruker dette temaet, inkludert populære nettsteder som GitHub.
GitHub kom dit førstDet bryter opp vår undersøkelse av den nye StarWars.com. Er det noen interessante biter av nettstedet du har avdekket? Kanskje du er interessert i å lese en "Hvordan gjorde de det" om et annet nettsted? Fortell oss i kommentarene!
