Share
Eenmalige marketingpagina's en -sites worden steeds populairder; in het bijzonder zijn deze "gerichte interactie-ervaringen" gegroeid rond de entertainmentindustrie, rapportage en productpresentaties. Vandaag zullen we ons concentreren op de moeren en bouten die zijn ingezet voor de oprichting van inception-explained.com en Mailchimp's 2012 Year in Review.
Beide sites hebben enkele overeenkomsten in termen van technische implementatie en grimmige verschillen op andere manieren. We hebben deze twee sites gekozen omdat ze een grote trend in webinteractieontwerp vertegenwoordigen: het standaardgedrag van scrolinteractie wijzigen door aangepaste animaties en / of inhoudstransformaties te maken die op de een of andere manier worden geactiveerd door de schuifpositie. Dus laten we erin duiken!
Voor beide sites is de meest voor de hand liggende functie het manipuleren van scrolinteractie. Beide sites hebben de scroll-gebeurtenis met JavaScript gemanipuleerd om zich anders te gedragen dan een standaard statisch document.
Mailchimp's manipulatie van de scroll-gebeurtenis is relatief subtiel; Tijdens het scrollen worden achtergrondwijzigingen geactiveerd en een deel van de inhoud overschrijdt, maar er is standaard scrolgedrag; de juiste contentsectie scrolt zoals normaal en biedt een toegankelijke interface om het datagedreven rapport te consumeren. Het rapport is op een secundaire manier gemakkelijk te doorlopen via links aan de linkerkant, die een schuifanimatie activeren. Het rapport is sterk afhankelijk van jQuery-waypoints, een jQuery-plug-in die de scrolgebeurtenis bekijkt om te zien wanneer een bepaald "waypoint" via de schuif bereikt is. In het bijzonder kan een pseudo-code uitleggen hoe dit zou worden gebruikt voor de MailChimp-implementatie.
Accentsconagua
// Definieer alle .hoofdsectie-elementen als waypoints $ (". Main-section"). Waypoint (functie (richting) // callback wanneer waypoint wordt bereikt, met scrollrichting als parameter var $ this = $ (this ); // caching van het waypoint element // verwijder de huidige klasse van alle broers en zussen die niet het huidige waypoint zijn $ this.siblings (). removeClass ("current"); // haal de achtergrond id uit het voorbeeld html: // var bgid = $ this.addClass ("current"). data ("bgid"); // haal het element op met een id gelijk aan de bgid en voeg de huidige klasse toe; verwijder de huidige klasse uit alle broers en zussen $ ("#" + bgid) .addClass ("current"). broers en zussen (). removeClass ("current"); ); De bovenstaande code is een voorbeeld van wat MailChimp mogelijk heeft gedaan om een aantal van deze effecten te bereiken. jQuery-waypoints zouden ook een geschikte manier zijn om "plakkerige" nav-elementen te creëren, met zoiets als dit:
$ ("nav.sticky"). waypoint (functie (richting) if (richting === "down") $ (this) .css (position: "fixed");) Inception Explained heeft een veel meer betrokken manipulatie van scrolgedrag.
De interactieve infographic is gebouwd door Matt Dempsey en vertrouwt sterk op CSS3-animaties en op JavaScript gebaseerde animaties, mogelijk gemaakt door Scrollorama van John Polacek, een jQuery-plug-in die in feite is gebouwd om precies die manipulaties uit te voeren die Matt heeft gedaan.
Laten we het over inhoud hebben.
Voor beide sites is de inhoud een van de sleutels tot het begrijpen van de ontwerpbeslissingen die zijn gemaakt (zoals geldt voor elk goed doordacht ontwerp). Het uitleggen van het overzicht van plot op het hoogste niveau van Inception is een heel andere taak dan het publiekelijk beoordelen van de prestaties en mislukkingen van een e-mailmarketingdienstbedrijf van vorig jaar.
Voor Inception Explained heeft de auteur van de content een relatief complexe vertelling gemaakt en de primaire plotpunten in een nieuw medium geëxtraheerd.
Dit verhaal heeft een 'broer / zus'-artefact (de film Inception) dat de kijker eerder moet hebben gezien om zich adequaat te identificeren met de ontwerpbeslissingen. De site functioneert niet goed als een vorm van entertainment-overzichtsvoertuig (waarbij iemand die de film niet heeft gezien een informatieve en nog steeds vermakelijke 'kern' van het verhaal kan krijgen). In plaats daarvan dient het om de spinnenwebben van verwarring te helpen verwijderen door de primaire keerpunten af te breken en indicatoren te tonen die die keerpunten verklaren.
Als je Inception hebt gezien, begrijp je dat de primaire build van de plot is opgesplitst in 'niveaus', die representatief zijn voor 'dromen in dromen'. Inception Explained neemt je een voor een door deze niveaus heen en gebruikt een paar constante visuele factoren om de complexiteit te verminderen. In het bijzonder worden de zeven hoofdpersonen en hun toestanden visueel weergegeven door cirkels in het hele verhaal naar de onderkant van de pagina.
Buiten dit, is een achtergrondbetekenis van de locatie van het huidige niveau ook een indicator; Een vliegtuig wordt getoond voor het "reality" -niveau, Yusuf's busje voor Level One, Arthur's droom in een hotel in Level Two, bergen die de besneeuwde scène in Niveau drie betekenen, en tot slot enigszins vage balken die waarschijnlijk de stadsgebouwen in de "Limbo" betekenen " niveau. Al deze beelden, zoals iedereen die de film heeft gezien, zouden begrijpen, zijn iconisch van de verschillende niveaus die in de film worden weergegeven.
Een animatieklok wordt rechtsboven getoond, die de relatie van tijd tot realiteit in elk niveau toont; als de personages dieper in elk niveau doordringen, vertraagt de tijd (zodat minuten uiteindelijk tientallen jaren lijken).
De plot wordt uitgelegd en pictogrammen gecombineerd met eenvoudige animaties vertegenwoordigen keerpunten in de plot. Toelichtende paragrafen zijn het belangrijkste middel voor gebruikers om de context van de animaties en statuswijzigingen te begrijpen.
De contentstrategie van MailChimp voor "A Look Back" is natuurlijk heel anders dan Inception Explained. "A Look Back" is het jaarverslag van MailChimp, waarin zowel kwalitatieve als kwantitatieve aspecten van hun prestaties in 2012 worden samengevat.
De contentstrategie volgt hier minder een verhaal en wordt in plaats daarvan gesegmenteerd in een schijn van 'sub-verhalen', aangedreven door marketing, kwantitatieve berichten en een sterke merkstem. Deze verschillende subverhalen zijn duidelijk gesegmenteerd: "De App", "Ondersteuning", "Bewerkingen", "Sociaal", "Geografie" en "Goede Ideeën" zijn de secties die in de nav worden geschetst, en die direct correleren met visuele verschuivingen in de ontwerp en inhoudsegmentatie. Deze secties worden geplaatst door de bewonderenswaardige woordvoerder chimp (Freddie) van MailChimp die in het begin over de stad Atlanta uitkijkt en zich vervolgens wendt naar het publiek aan het eind.
MailChimp pakt in dit rapport veel aandacht op de inhoudstrategie; met name de schaal van impact en groei die MailChimp het afgelopen jaar heeft gerealiseerd, is de belangrijkste boodschap. Een belangrijke metriek van bewijs is het eerste in het eerste deelverhaal - "verzonden e-mails: 34.796.235.769". Dat is een groot aantal iets, en dat is wat dient als bewijs dat MailChimp het beste e-mailt.
Dit is een "best-foot-forward" -strategie. Daar eindigt het echter niet; MailChimp heeft het een duidelijk punt gemaakt om een vriendelijke stem te behouden die past bij de eigenzinnigheid van de chimp-mascotte Freddie. In dezelfde sectie zien we een betekenaar van "Party-Poopers" (1,9% van de gebruikersbasis van MailChimp valt in deze categorie).
Dit zorgt voor een gevoel van transparantie met behoud van de algehele positieve en speelse toon die MailChimp vooraf heeft vastgesteld. Het adresseert het slechte direct, waarbij de metriek wordt voorgesteld als een plezierige en vermakelijke ervaring voor de lezer. We kunnen vergelijkbare notities zien in de contentstrategie voor MailChimp.
Nu gaan we over op de details van de technologische implementatie.
Er is een groot verschil in de prestaties van deze twee sites, voornamelijk als gevolg van één belangrijke factor: de bibliotheken met scrollobservatie werken op twee heel verschillende paradigma's voor het triggeren van scrollgebeurtenissen.
In Scrollorama wordt de animatiecode bij elke scroll uitgevoerd; deze animatiecode animeert alle "animate-able" -objecten, waardoor een grote hoeveelheid berekening en herschrijving van de browser optreedt. Voor Inception is dit echter het meest gewenste effect, omdat elke pixel relevant is voor de ontworpen animaties. Dit soort intensieve scroll-watching en daaropvolgende animatiefunctie kan ervoor zorgen dat een browser bij elke scroll-gebeurtenis opnieuw wordt geschilderd. Helaas is voor een site als Inception Explained deze scroll-kijktechniek nodig om nauwkeurig een animatietoestand te behouden voor elke afzonderlijke scrolpositie.
Aan de andere kant staat jQuery-routepunten het beperken van scroll-events toe door een time-out en een "didScroll" -variabele in te stellen.
Verder heeft de functie onScroll een beperkte set functies; in het bijzonder controleert het of een bepaald waypoint is bereikt (vandaar de naam) en vuurt het door de gebruiker gedefinieerde functies af wanneer die waypoints worden bereikt. Dit zorgt voor veel minder herpositionering van DOM, maar vereist ook een opoffering van flexibiliteit en werkt mogelijk minder goed voor complexere animaties gebaseerd op keyframes die zijn afgeleid van de schuifpositie.
Hoewel beide projecten hun code hebben gecomprimeerd, kunnen we een aantal kernfuncties bekijken die de twee sites hebben gebruikt.
We zullen eerst de implementatie van Waypoints van Mailchimp bekijken. (Opmerking: deze code is enigszins aangepast ten opzichte van de originele minifed-versie voor leesbaarheid.)
function set \ _active \ _section (index) $ (". section.fixed"). removeClass ("fixed"); $ ( "Sectie. ") Eq (index) .addClass (" fixed."); $ ( "Eigen link.selected. ") RemoveClass (" geselecteerd."); $ (". site-nav li: not (: has (#freddie))"). eq (index) .find (". site-link"). addClass ("selected"); $ (". section .content"). waypoint (functie (gebeurtenis, richting) var current_section; current_section = $ (this) .parent (". section"); direction === "up" && current_section.index ( )> 0 && (current_section = current_section.prev ()); // can \ _animate \ _background set outside this code can \ _animate \ _background && (set \ _active \ _section (current_section.index ()); // animeer achtergrond gebruikt Modernizr om te controleren of CSS kan worden gebruikt in plaats van JS-animaties animate_background (current_section.index ())); current_section.attr ("id") === "sectie-footer" && $ (". site-nav") .fadeOut (); if (direction === "up") return $ (". site-nav"). fadeIn (); Laten we deze code eens doorlopen om te zien wat er aan de hand is.
Eerst zien we een functie die in feite een index van de sectie ontvangt om actief te maken. Het doet sommige dingen voor speciale secties (zoals Freddie's foto's) en navs ook.
De Waypoint-call en callback maken de set_active_section, en controleer voor welke richting het doel werd bereikt. Mailchimp zet de scroll-throttling ook op 0.
Mailchimp gebruikt Google Analytics ook om te zien naar welke secties mensen kijken en na te gaan hoe lang het hen heeft gekost om naar die secties te kijken, waarschijnlijk om te zien hoeveel tijd / engagement mensen in elk van de secties investeren. Als u deze informatie heeft, kan MailChimp het meest gebruikelijke pad van de gebruiker zien - of mensen op de pagina zijn gesprongen, direct naar een sectie of een andere sectie zijn gegaan of de pagina sequentieel hebben doorlopen, met dezelfde gemiddelde hoeveelheid tijd per sectie.
Een korte opmerking: de&& operator gedraagt zich als een "als dat dan dat" - iets && somethingelse is enigszins equivalent aan if (iets) somethingelse; als && controleert of de linkerkant waar is voordat u naar de rechterkant gaat. Inception Explained maakt gebruik van een zeer eenvoudige reeks herhaalde functies op basis van Scrollorama.
var a = $ .scrollorama (blocks: ".scrollblock"); a.onBlockChange (function () var b = a.blockIndex; $ ("# console"). css ("display", "block"). text ("onBlockChange | blockIndex:" + b + "| huidig blok: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality .bg", delay: 300, duration: 35E3, property: "left", start: 100, end: 1100); a.animate ("# reality .bg", delay: 300, duration: 35E3, property: "top", start: 120, end: 340); // ... Deze code wordt direct vanaf het begin van het Inception Explained-script genomen; hier zien we een voorbeeld van eenvoudig gebruik van de animatiefunctie van Scrollorama (wat anders is dan de animatiefunctie van jQuery). Deze oproepen registreren in feite hoofdframes voor elementen voor Scrollorama om te bekijken en uit te voeren; bijvoorbeeld, de eerste bezette oproep heeft een vertraging van 300 pixels, een duur van 35e3 (of 35k), een startwaarde van 100 en een eindwaarde van 1100.
Dit betekent in essentie het volgende:
Inception Explained heeft 300 verschillende .animate () aanroepen die vergelijkbaar zijn met deze.
We kunnen van beide sites een vergelijkbare interactiemanipulatie zien met zeer verschillende doelen en sterk uiteenlopende effecten.
MailChimp en Inception Explained hebben ons het belang van de inhoudstrategie getoond en de juiste tool voor de klus gekozen; bovendien kunnen we verwachten dat de interactie met scrollen nog verder zal evolueren, aangezien touch-apparaten marktaandeel blijven veroveren en swipen / scrollen gebaren zelfs verder worden ontwikkeld als een standaard interactiepatroon.
