Share
Einmalige Marketing-Seiten und Websites werden immer beliebter. Diese "fokussierten Interaktionserfahrungen" sind insbesondere um die Unterhaltungsindustrie, das Berichtswesen und die Produktauswahl herum gewachsen. Heute konzentrieren wir uns auf die Grundlagen, die beim Bau von inception-explained.com und von Mailchimps 2012-Jahresrückblick verwendet wurden.
Beide Standorte haben einige Ähnlichkeiten in Bezug auf die technische Implementierung und deutliche Unterschiede in anderer Hinsicht. Wir haben diese beiden Websites ausgewählt, da sie einen großen Trend im Webinteraktionsdesign darstellen: Ändern des Standardverhaltens der Bildlaufinteraktion durch Erstellen benutzerdefinierter Animationen und / oder Inhaltsumwandlungen, die auf irgendeine Weise durch die Bildlaufposition ausgelöst werden. Also lass uns eintauchen!
Das offensichtlichste Merkmal dieser beiden Websites ist die Manipulation der Bildlaufinteraktion. Beide Seiten haben das Bildlaufereignis mit JavaScript so geändert, dass es sich anders verhält als ein statisches Standarddokument.
Mailchimps Manipulation des Scroll-Events ist relativ subtil; Während das Scrollen Hintergrundänderungen und einige Überblendungen von Inhalten auslöst, gibt es ein gewisses Standardverhalten beim Scrollen. Der rechte Inhaltsbereich blättert wie üblich und bietet eine zugängliche Schnittstelle zum Abrufen des datengesteuerten Berichts. Über Links auf der linken Seite, die eine Bildlaufanimation auslösen, kann der Bericht auf sekundäre Weise leicht abgerufen werden. Der Bericht stützt sich stark auf jQuery-Wegpunkte, ein jQuery-Plugin, das das Bildlaufereignis überwacht, um zu sehen, wann ein bestimmter "Wegpunkt" über Bildlauf erreicht wurde. Einige Pseudo-Codes können insbesondere erklären, wie dies für die MailChimp-Implementierung verwendet wird.
Accentsconagua
// Definiere alle .main-section-Elemente als Wegpunkte $ (". Main-section"). Waypoint (function (direction) // callback, wenn Wegpunkt erreicht ist, mit Scrollrichtung als Parameter var $ this = $ (this // Zwischenspeicherung des Wegpunktelements // Entferne die aktuelle Klasse von allen Geschwistern, die nicht der aktuelle Wegpunkt sind $ this.siblings (). removeClass ("current"); // Die Hintergrund-ID aus Beispielhtml: // abrufen var bgid = $ this.addClass ("current"). data ("bgid"); // Holen Sie sich das Element mit einer id gleich der bgid und fügen Sie die aktuelle Klasse hinzu. Entferne die aktuelle Klasse von allen Geschwistern $ ("#" + bgid) .addClass ("current"). siblings (). removeClass ("current"); ); Der obige Code ist ein Beispiel dafür, was MailChimp möglicherweise getan hat, um einige dieser Effekte zu erzielen. jQuery Waypoints wären auch eine geeignete Methode, um "sticky" Nav-Elemente zu erstellen.
$ ("nav.sticky"). Wegpunkt (Funktion (Richtung) if (Richtung === "ab") $ (this) .css (position: "fixed"); Inception Explained beinhaltet viel mehr Manipulation des Scrollverhaltens.
Die interaktive Infografik wurde von Matt Dempsey erstellt und stützt sich stark auf CSS3-Animationen und JavaScript-basierte Animationen, die von John Polaceks Scrollorama unterstützt werden, einem jQuery-Plugin, das im Wesentlichen für die von Manipulationen verwendeten Manipulationen entwickelt wurde.
Reden wir über den Inhalt.
Für beide Websites ist der Inhalt einer der Schlüssel zum Verständnis der getroffenen Entwurfsentscheidungen (wie es für jedes durchdachte Design der Fall ist). Die übergeordnete Übersicht über Plots von Inception zu erklären, ist eine ganz andere Aufgabe als die öffentliche Überprüfung der Erfolge und Misserfolge eines E-Mail-Marketing-Servicegeschäfts im vergangenen Jahr.
Für Inception Explained hat der Autor des Inhalts eine relativ komplexe Erzählung aufgenommen und die primären Plotpunkte in ein neues Medium extrahiert.
Diese Erzählung hat ein "Geschwister" -Artefakt (den Film Inception), das der Betrachter zuvor gesehen haben muss, um sich mit den Entwurfsentscheidungen angemessen zu identifizieren. Die Seite funktioniert nicht gut als eine Art Unterhaltungszusammenfassungsfahrzeug (in dem jemand, der den Film nicht gesehen hat, einen informativen und dennoch unterhaltsamen Überblick über die Geschichte erhalten kann). Stattdessen dient es dazu, die Spinnweben der Verwirrung zu beseitigen, indem die primären Wendepunkte niedergerissen und Indikatoren angezeigt werden, die diese Wendepunkte erklären.
Wenn Sie Inception gesehen haben, verstehen Sie, dass der Hauptaufbau der Handlung in "Ebenen" unterteilt ist, die für "Träume in Träumen" stehen. Inception Explained führt Sie einzeln durch diese Ebenen und verwendet einige konstante visuelle Faktoren, um die Komplexität zu reduzieren. Insbesondere werden die sieben Hauptfiguren und ihre Zustände in der gesamten Erzählung am unteren Rand der Seite visuell durch Kreise dargestellt.
Darüber hinaus ist ein Hintergrundsymbol für den Ort der aktuellen Ebene auch ein Indikator. Ein Flugzeug wird für das "Reality" -Niveau gezeigt, Yusufs Van für Level One, Arthur's Traum in einem Hotel in Level Two, Berge, die die verschneite Szene in Level 3 anzeigen, und schließlich etwas unbestimmte Bars, die wahrscheinlich die Gebäude der Stadt im "Limbo" bedeuten " Niveau. Alle Bilder, die jeder gesehen hat, der den Film gesehen hat, verstehen die verschiedenen Ebenen des Films.
Rechts oben wird eine animierende Uhr angezeigt, die das Verhältnis der Zeit zur Realität in jedem Level zeigt. Je tiefer die Charaktere in die einzelnen Ebenen eintauchen, desto langsamer wird die Zeit (so dass die Minuten letztendlich wie Jahrzehnte wirken)..
Die Darstellung wird erklärt, und Symbole, die mit einfachen Animationen gekoppelt sind, repräsentieren Wendepunkte in der Darstellung. Erläuternde Absätze sind das wichtigste Instrument, mit dem Benutzer den Kontext der Animationen und Zustandsänderungen verstehen können.
Die Inhaltsstrategie von MailChimp für "A Look Back" unterscheidet sich natürlich von Inception Explained. "Ein Blick zurück" ist der Jahresbericht von MailChimp, der sowohl qualitative als auch quantitative Aspekte ihrer Leistung im Jahr 2012 zusammenfasst.
Die inhaltliche Strategie folgt hier weniger einer Erzählung, sondern wird in einen Anschein von "Untererzählungen" unterteilt, die durch Marketing, quantitatives Messaging und eine starke Markenstimme angetrieben werden. Diese verschiedenen Untererzählungen sind klar segmentiert: "Die App", "Support", "Operations", "Social", "Geography" und "Good Ideas" sind die Abschnitte, die im Nav skizziert werden und die direkt mit den visuellen Verschiebungen im Navi korrelieren Design und Content-Segmentierung. Diese Abschnitte werden von MailChimps bewundernswertem Sprecher-Schimpanse (Freddie), der zu Beginn auf die Stadt Atlanta blickt, gebogen und dann zum Ende gewinkt.
MailChimp geht in diesem Bericht eine Reihe von Gründen für die inhaltliche Strategie ein. Insbesondere das Ausmaß der Auswirkungen und des Wachstums, das MailChimp im letzten Jahr realisiert hat, ist die wichtigste Botschaft. Eine wichtige Beweisgröße ist das erste in der ersten Teilerzählung - "E-Mails gesendet: 34.796.235.769". Das ist eine große Anzahl von etwas, und das ist der Beweis dafür, dass MailChimp E-Mails am besten kann.
Dies ist eine "Best-Foot-Forward" -Strategie. Es endet jedoch nicht dort; MailChimp hat sich klar zum Ziel gesetzt, eine freundliche Stimme zu behalten, die der Laune des Schimpansen-Maskottchens Freddie entspricht. Im selben Abschnitt sehen wir einen "Party-Poopers" -Umzeichner (1,9% der MailChimp-Userbase fallen in diese Kategorie)..
Dies sorgt für ein Gefühl von Transparenz und behält gleichzeitig den insgesamt positiven und spielerischen Ton bei, den MailChimp vorab festgelegt hat. Es spricht direkt das Schlechte an und gestaltet die Metrik als eine angenehme und unterhaltsame Erfahrung für den Leser. In der gesamten Inhaltsstrategie für MailChimp werden ähnliche Hinweise angezeigt.
Jetzt werden wir uns auf die Details der technologischen Implementierung konzentrieren.
Diese beiden Sites unterscheiden sich stark in der Leistung, hauptsächlich aufgrund eines Hauptfaktors: Die Bibliotheken für das Durchsuchen von Scrollen verwenden zwei sehr unterschiedliche Paradigmen für das Auslösen von Scrollereignissen.
In Scrollorama wird der Animationscode bei jedem Bildlauf ausgeführt. Dieser Animationscode animiert alle "animate-fähigen" Objekte, wodurch eine große Menge an Berechnungen und Browser-Repaint-Vorgängen ausgelöst wird. Für Inception jedoch ist dies der am meisten gewünschte Effekt, da jedes Pixel für die entworfenen Animationen relevant ist. Diese Art der intensiven Bildlaufüberwachung und der nachfolgenden Animationsfunktion kann dazu führen, dass der Browser jedes Bildlaufereignis neu zeichnet. Für eine Site wie Inception Explained ist diese Technik zur Bildlaufüberwachung leider notwendig, um den Animationsstatus für jede einzelne Bildlaufposition genau zu erhalten.
Auf der anderen Seite ermöglicht jQuery Waypoints die Drosselung von Scrollereignissen, indem ein Timeout und eine "didScroll" -Variable festgelegt werden.
Darüber hinaus verfügt die onScroll-Funktion über eine reduzierte Funktionalität. Insbesondere wird geprüft, ob ein bestimmter Wegpunkt erreicht wurde (daher der Name), und es werden benutzerdefinierte Funktionen ausgelöst, wenn diese Wegpunkte erreicht werden. Dies ermöglicht eine wesentlich geringere Neulackierung von DOM, erfordert aber auch ein Nachlassen der Flexibilität und funktioniert möglicherweise nicht so gut für komplexere Animationen, die auf Keyframes basieren, die von der Bildlaufposition abgeleitet wurden.
Während beide Projekte ihren Code komprimiert haben, können wir uns einige Kernfunktionen ansehen, die von den beiden Standorten verwendet werden.
Wir werden zuerst die Implementierung von Mailchimp's Waypoints betrachten. (Hinweis: Dieser Code wurde aus Gründen der Lesbarkeit gegenüber der ursprünglichen minifed-Version geringfügig geändert.)
Funktionssatz \ _active \ _section (index) $ (". section.fixed"). removeClass ("fixed"); $ (". section"). eq (index) .addClass ("fixed"); $ (". site-link.selected"). removeClass ("selected"); $ (". site-nav li: nicht (: has (#freddie))"). eq (index) .find (". site-link"). addClass ("selected"); $ (". section .content"). Wegpunkt (Funktion (Ereignis, Richtung) var current_section; current_section = $ (this) .parent (". section"); direction === "up" && current_section.index ( )> 0 && (current_section = current_section.prev ()); // can \ _animate \ _background außerhalb dieses Codes gesetzt kann _ _animate \ _background && (set \ _active \ _section (current_section.index ()); // Hintergrund animieren verwendet Modernizr, um zu überprüfen, ob CSS anstelle von JS-Animationen verwendet werden kann animate_background (current_section.index ())); current_section.attr ("id") === "section-footer" && $ (". site-nav") .fadeOut (); if (direction === "up") return $ (". site-nav"). fadeIn (); Lassen Sie uns diesen Code durchgehen, um zu sehen, was los ist.
Zuerst sehen wir eine Funktion, die im Wesentlichen einen Index des Abschnitts erhält, der aktiviert werden soll. Es erledigt einige Dinge für spezielle Bereiche (wie Freddies Bilder) und für Navis.
Der Wegpunktanruf und der Rückruf werden ausgelöst set_active_section, und prüfen, aus welcher Richtung das Ziel erreicht wurde. Mailchimp hat auch die Scrolldrosselung auf 0 gesetzt.
Mailchimp verwendet Google Analytics auch, um zu sehen, welche Bereiche von Benutzern betrachtet werden, und zu überprüfen, wie lange es gedauert hat, bis diese Abschnitte betrachtet wurden, vermutlich um zu sehen, wie viel Zeit / Engagement die einzelnen Mitarbeiter in jeden der Abschnitte investieren. Wenn Sie diese Informationen haben, kann MailChimp den häufigsten "Pfad" des Benutzers sehen - unabhängig davon, ob die Benutzer auf der Seite herumsprangen, direkt zu einem oder dem anderen Abschnitt verschoben wurden oder die Seite sequenziell durchlaufen haben und dieselbe durchschnittliche Zeit pro Abschnitt verbrachten.
Eine kurze Notiz: das&& Operator fungiert als "Wenn dies dann das ist" - etwas && etwasSelse ist etwas gleichbedeutend mit If (etwas) etwasSelse; as && prüft, ob die linke Seite wahr ist, bevor Sie auf die rechte Seite wechseln. Inception Explained verwendet einen sehr einfachen Satz wiederholter Funktionen, die auf Scrollorama basieren.
var a = $ .scrollorama (blocks: ".scrollblock"); a.onBlockChange (function () var b = a.blockIndex; $ ("# console"). css ("display", "block"). text ("onBlockChange | blockIndex:" + b + "| aktueller Block: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality.bg", delay: 300, Dauer: 35E3, Eigenschaft: "left", Start: 100, Ende: 1100); a.animate ("# reality.bg", delay: 300, Dauer: 35E3, Eigenschaft: "top", Start: 120, Ende: 340); //… Dieser Code wird direkt vom Start des Inception Explained-Skripts übernommen. Hier sehen Sie ein Beispiel für die unkomplizierte Verwendung der Scrollorama-Animationsfunktion (die sich von der Animationsfunktion von jQuery unterscheidet). Bei diesen Aufrufen werden im Wesentlichen Keyframes für Elemente registriert, die Scrollorama ansehen und ausführen kann. Beispielsweise hat der erste animierte Anruf eine Verzögerung von 300 Pixeln, eine Dauer von 35e3 (oder 35k), einen Startwert von 100 und einen Endwert von 1100.
Dies bedeutet im Wesentlichen Folgendes:
Inception Explained hat 300 verschiedene .animate () - Aufrufe, die diesem ähnlich sind.
Von beiden Seiten aus sehen wir eine ähnliche Interaktionsmanipulation mit sehr unterschiedlichen Zielen und stark abweichenden Effekten.
MailChimp und Inception Explained haben uns gezeigt, wie wichtig die Inhaltsstrategie und die Wahl des richtigen Tools für den Job sind. Darüber hinaus können wir davon ausgehen, dass sich die Interaktion mit dem Scrollen noch weiter entwickelt, da Touch-Geräte weiterhin Marktanteile gewinnen und Gesten durch Wischen / Scrollen als Standard-Interaktionsmuster weiterentwickelt werden.
