Share
Engangs markedsføringssider og nettsteder blir stadig mer populære; Spesielt har disse "fokuserte interaksjonsopplevelsene" vokst seg rundt underholdningsindustrien, rapporteringen og produktplassene. I dag vil vi fokusere på mutter og bolter som gikk inn i bygningen begynnelse-explained.com og Mailchimp's 2012 Year in Review.
Begge disse nettstedene har noen likheter når det gjelder teknisk gjennomføring, og sterke forskjeller på andre måter. Vi har plukket disse to nettstedene fordi de representerer en stor trend i web-interaksjonsdesign: modifiserer standardoppførelsen for rullingsinteraksjon ved å lage egendefinerte animasjoner og / eller innholdstransformasjoner som utløses på en eller annen måte av rulleposisjonen. Så la oss dykke inn!
For begge disse nettstedene er den mest åpenbare funksjonen manipulering av rulleinteraksjon. Begge nettstedene har manipulert rullehendelsen med JavaScript for å oppføre seg annerledes enn et standard statisk dokument.
Mailchimp's manipulering av rullehendelsen er relativt subtil; Mens rulling utløser bakgrunnsendringer og noe innholdsoverskridende, eksisterer det noen standard rulleoppførsel; Riktig innholdsavsnitt ruller som normalt, og tilbyr et tilgjengelig grensesnitt for å forbruke den data-drevne rapporten. Rapporten er enkelt omdirigert på sekundær måte via linker til venstre, som utløser en rulleanimasjon. Rapporten er avhengig av jQuery Waypoints, et jQuery-plugin som ser på rullehendelsen for å se når et visst "veipunkt" er nådd via bla. Spesielt kan noen pseudokoder forklare hvordan dette vil bli brukt til MailChimp-implementeringen.
Accentsconagua
// Definer alle .main-delelementer som veipunkter $ ("hovedavsnitt"). Veipunkt (funksjon (retning) // tilbakering når veipunkt er nådd, med rulleretning som parameter var $ this = $ (dette ); // caching veipunktelementet // fjerne nåværende klasse fra alle søsken som ikke er det nåværende veipunktet $ this.siblings (). removeClass ("current"); // få bakgrunns-ID fra eksempel html: // var bgid = $ this.addClass ("nåværende") .data ("bgid"); // få elementet med et id som er lik bgid og legg til nåværende klasse; fjern nåværende klasse fra alle søsken $ ("#" + bgid) .addClass ("nåværende"). søsken (). removeClass ("current"); ); Ovennevnte kode er et eksempel på hva MailChimp kan ha gjort for å oppnå noen av disse effektene. jQuery-veipunkter vil også være en passende måte å lage "klebrig" navelementer på, med noe som dette:
$ ("nav.sticky"). veipunkt (funksjon (retning) hvis (retning === "ned") $ (dette) .css (posisjon: "fast");) Begynnelsen forklart har en mye mer involvert manipulasjon av rulleadferd.
Bygget av Matt Dempsey, er det interaktive infografisk avhengig av CSS3-animasjoner og JavaScript-baserte animasjoner drevet av John Polaceks Scrollorama, et jQuery-plugin bygget i utgangspunktet for å gjøre akkurat de slags manipulasjoner Matt har gjort.
La oss snakke om innhold.
For begge disse nettstedene er innholdet en av nøklene til å forstå designbeslutningene som ble laget (som det er sant for et godt gjennomtenkt design). Forklare oversikt over høyt nivå på Inception er en helt annen oppgave enn offentlig gjennomgang av det siste års prestasjoner og feil i en e-postmarkedsføringstjenestevirksomhet.
For begynnelsen forklart, har innholdsforfatteren tatt en relativt komplisert fortelling og hentet de primære plottepunktene inn i et nytt medium.
Denne fortellingen har en "søsken" artefakt (filmen Inception) som betrakteren må ha sett tidligere, tilstrekkelig å identifisere med designbeslutningene. Nettstedet virker ikke bra som en form for underholdningssammenhengende kjøretøy (hvor noen som ikke har sett filmen kan få en informativ og fortsatt underholdende "historie" av historien). I stedet tjener det til å eliminere spindelvævene av forvirring ved å bryte ned de primære vendepunktene og vise indikatorer som forklarer disse vendepunktene.
Hvis du har sett Inception, forstår du at den primære bygningen av tomten er oppdelt i "nivåer", som er representative for "drømmer i drømmer". Begynnelsen forklarer deg gjennom disse nivåene en om gangen, ved å bruke noen få konstante visuelle faktorer for å redusere kompleksiteten. Spesielt er de syv hovedpersonene og deres stater representert visuelt av sirkler gjennom hele fortellingen mot bunnen av siden.
Utover dette er en bakgrunnsbetegnelse for stedet for dagens nivå også en indikator; Et fly er vist for "reality" -nivået, Yusufs varebil for Level One, Arthurs drøm på et hotell i nivå to, fjell som betegner den snødekte scenen på nivå tre, og til slutt noe vage barer som sannsynligvis betyr at byens bygninger i Limbo "nivå. Alt dette bildet, som alle som har sett filmen ville forstå, er ikoniske av de forskjellige nivåene som er representert i filmen.
En animasjonsklokke vises øverst til høyre, som viser forholdet mellom tid og virkelighet i hvert nivå; som tegnene går dypere inn i hvert nivå, går tiden ned (slik at minutter etter hvert ser ut som årtier).
Plottet er forklart, og ikoner sammen med enkle animasjoner representerer vendepunkter i plottet. Forklarende avsnitt er det primære kjøretøyet for brukere å forstå sammenhengene med animasjonene og tilstandsendringene.
MailChimps innholdsstrategi for "A Look Back" er veldig forskjellig, selvfølgelig, enn Inception Explained. "A Look Back" er MailChimps årsrapport, som oppsummerer både kvalitative og kvantitative aspekter av deres resultater i 2012.
Innholdsstrategien her følger mindre av en fortelling, og i stedet er segmentert i en del av "sub-narratives", drevet av markedsføring, kvantitative meldinger og en sterk merkevare stemme. Disse forskjellige underfortellelsene er tydelig segmentert: "The App", "Support", "Operations", "Social", "Geography" og "Good Ideas" er seksjonene som er skissert i naven, direkte korrelert med visuelle skift i design og innholdssegmentering. Disse seksjonene er booket av MailChimps beundringsverdige talsmannskimpanse (Freddie), som ser ut over Atlanta sentrum i begynnelsen, og deretter vender seg til bølgen til publikum på slutten.
MailChimp takler mye grunnlag for innholdsstrategi i denne rapporten; spesielt omfanget av påvirkning og vekst MailChimp har innsett i det siste året er den primære meldingen. Et stort bevisbevis er det første i den første underfortellingen - "Emails sendt: 34.796.235.769". Det er et stort antall hva som helst, og det er det som tjener som bevis på at MailChimp e-poster best.
Dette er en "best-foot-forward" -strategi. Men det slutter ikke der; MailChimp har gjort det et klart poeng å beholde en vennlig stemme som stemmer overens med whimsy av chimpanse mascot Freddie. I samme seksjon ser vi en "Party-Poopers" signifier (med 1,9% av MailChimp's brukerbase faller inn i denne kategorien).
Dette oppnår en følelse av åpenhet mens du beholder den overordnede positive og lekende tonen MailChimp har pre-established. Den adresserer direkte den dårlige, innrammet metriske som en hyggelig og underholdende opplevelse for leseren. Vi kan se lignende notater gjennom innholdsstrategien for MailChimp.
Nå skal vi skifte for å snakke om de teknologiske implementeringsdetaljer.
Det er en sterk forskjell i ytelsen til disse to nettstedene, hovedsakelig på grunn av en hovedfaktor: de rullelagende biblioteker opererer på to svært forskjellige paradigmer for utløser av rullehendelse.
I Scrollorama blir animasjonskoden utført på hver rulle; Denne animasjonskoden animerer alle "animate-capable" objekter, noe som forårsaker en stor mengde beregning og nettlesermaling som skal skje. Men for begynnelsen forklart, er dette den mest ønskede effekten, da hver piksel er relevant for de utformede animasjonene. Denne typen intensiv rulleskyting og etterfølgende animasjonsfunksjon kan føre til at en nettleser omhylles på hver rullehendelse. Dessverre, for et nettsted som Inception Explained, er denne rullevisningsteknikken nødvendig for å holde en animasjonsstatus nøyaktig for hver enkelt rulleposisjon.
På den annen side tillater jQuery-veipunkter gassreguleringen av rullehendelser ved å sette en timeout og en "didScroll" -variabel.
Utover dette har onScroll-funksjonen et redusert sett med funksjonalitet; Det kontrollerer spesielt at det er oppnådd et bestemt veipunkt (dermed navnet), og brenner brukerdefinerte funksjoner når disse veipunktene er nådd. Dette muliggjør mye mindre DOM-maling, men krever også et offer av fleksibilitet, og kan ikke fungere for mer komplekse animasjoner basert på keyframes avledet fra rulleposisjonen.
Selv om begge prosjektene har komprimert koden sin, kan vi se på noen av kjernefunksjonene de to nettstedene som brukes.
Vi vil se på implementering av Mailchimp's Waypoints først. (Merk: Denne koden er blitt endret litt fra den opprinnelige minifiserte versjonen for lesbarhet.)
funksjonssett \ _active \ _section (indeks) $ (". section.fixed"). removeClass ("fixed"); $ ( "I ") EQ (indeks) .addClass (" fast").; $ ( "Site-link.selected. ") RemoveClass (" valgt."); $ (".site-nav li: ikke (: har (#freddie))"). eq (indeks) .find ("nettsted-link"). addClass ("valgt"); $ (".avsnitt .content") .veipunkt (funksjon (begivenhet, retning) var current_section; current_section = $ (dette) .parent (". section"); retning === "opp" && current_section.index )> 0 && (current_section = current_section.prev ()); // kan \ _animate \ _background sett utenfor denne koden kan \ _animate \ _background&& (sett \ _active \ _section (current_section.index ()); // animere bakgrunn bruker Modernizr for å sjekke om CSS kan brukes i stedet for JS animasjoner animate_background (current_section.index ())); current_section.attr ("id") === "section-footer" && $ (".site-nav") .fadeOut (); hvis (retning === "opp") returnere $ (".site-nav"). fadeIn (); Så la oss gå gjennom denne koden for å se hva som skjer.
Først ser vi en funksjon som i hovedsak mottar en indeks for seksjonen for å bli aktiv. Det gjør noen ting for spesielle seksjoner (som Freddie's bilder) og navs også.
Waypoint-anropet og tilbakeringingen avfyrer set_active_section, og se etter hvilken retning målet ble nådd fra. Mailchimp stiller også rullestrengningen til 0.
Mailchimp bruker også Google Analytics til å se hvilke seksjoner folk ser på, og sjekke hvor lenge det tok dem å se på de seksjonene som trolig kunne se hvor mye tid / engasjement folk investerer i hver av seksjonene. Å ha denne informasjonen vil tillate MailChimp å se den vanligste brukerens "bane" - om folk hoppet rundt på siden, flyttet direkte til en seksjon eller en annen, eller gikk gjennom siden i rekkefølge, og brukte samme gjennomsnittlige tid per seksjon.
Et raskt notat: de&& operatør fungerer som en "hvis dette da det" - noe && somethingelse er noe tilsvarende hvis (noe) somethingelse; som && sjekker at venstre side skal være sant før du beveger deg på høyre side. Inception Explained bruker et veldig enkelt sett med gjentatte funksjoner basert på Scrollorama.
var a = $ .scrollorama (blokker: ".scrollblock"); a.onBlockChange (funksjon () var b = a.blockIndex; $ ("# konsoll"). css ("display", "block"). tekst ("onBlockChange | blockIndex:" + b + "| nåværende blokk: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality .bg", forsinkelse: 300, varighet: 35E3, egenskap: "venstre", start: 100, slutt: 1100); a.animate ("# reality .bg", forsinkelse: 300, varighet: 35E3, egenskap: "topp", start: 120, slutt: 340); // ... Denne koden er hentet direkte fra begynnelsen av startbildet. her ser vi et eksempel på enkel bruk av Scrolloramas animasjonsfunksjon (som er forskjellig fra jQuery's animasjonsfunksjon). Disse samtalene registrerer i hovedsak keyframes for elementer for Scrollorama å se og utføre; for eksempel har den første animeanropet en 300 pixelforsinkelse, en varighet på 35e3 (eller 35k), en startverdi på 100 og en sluttverdi på 1100.
Dette betyr i hovedsak følgende:
Begynnelsen forklart har 300 forskjellige .animate () anrop som ligner denne.
Vi kan se fra begge disse nettstedene en lignende interaksjonsmanipulering, med svært forskjellige mål og vesentlige divergerende effekter.
MailChimp og Inception Explained har vist oss viktigheten av innholdsstrategi og valg av riktig verktøy for jobben; Videre kan vi forvente å se rullende samspill utvikle seg enda lenger, siden berøringsenheter fortsetter å fange markedsandeler, og swiping / scrolling bevegelser er enda mer utviklet som et standard samspillsmønster.
