Share
Las páginas y sitios de mercadeo únicos son cada vez más populares; en particular, estas "experiencias de interacción enfocadas" han crecido alrededor de la industria del entretenimiento, la presentación de informes y los lanzamientos de productos. Hoy, nos enfocaremos en las tuercas y tornillos que se usaron en la construcción de inception-explained.com y en el resumen del año 2012 de Mailchimp.
Ambos sitios tienen algunas similitudes en términos de implementación técnica y marcadas diferencias en otras formas. Hemos elegido estos dos sitios porque representan una gran tendencia en el diseño de interacción web: modificar el comportamiento predeterminado de la interacción de desplazamiento mediante la creación de animaciones personalizadas y / o transformaciones de contenido que se activan de alguna manera por la posición de desplazamiento. Así que vamos a bucear en!
Para ambos sitios, la característica más obvia es la manipulación de la interacción de desplazamiento. Ambos sitios han manipulado el evento de desplazamiento con JavaScript para comportarse de manera diferente a un documento estático predeterminado.
La manipulación de Mailchimp del evento scroll es relativamente sutil; Mientras que el desplazamiento activa los cambios de fondo y algunos contenidos se funden, existe cierto comportamiento de desplazamiento predeterminado; la sección de contenido correcta se desplaza normalmente, ofreciendo una interfaz accesible para consumir el informe basado en datos. El informe es fácilmente transitable de forma secundaria a través de los enlaces de la izquierda, que activan una animación de desplazamiento. El informe se basa en gran medida en jQuery Waypoints, un complemento de jQuery que observa el evento de desplazamiento para ver cuándo se ha alcanzado un cierto "punto de referencia" mediante el desplazamiento. En particular, algunos pseudocódigo pueden explicar cómo se usaría esto para la implementación de MailChimp.
Accentsconagua
// Defina todos los elementos .main-section como waypoints $ (". Main-section"). Waypoint (function (direction) // callback cuando se alcanza waypoint, con la dirección de scroll como parámetro var $ this = $ (this ); // almacenando en caché el elemento de waypoint // elimina la clase actual de todos los hermanos que no son el waypoint actual $ this.siblings (). removeClass ("current"); // obtiene el id de fondo del ejemplo html: // var bgid = $ this.addClass ("current"). data ("bgid"); // obtener el elemento con un id igual al bgid y agregar la clase actual; eliminar la clase actual de todos los hermanos $ ("#" + bgid) .addClass ("current"). siblings (). removeClass ("current"); ); El código anterior es un ejemplo de lo que MailChimp pudo haber hecho para lograr algunos de estos efectos. jQuery Waypoints también sería una forma adecuada de crear elementos de navegación "pegajosos", con algo como esto:
$ ("nav.sticky"). waypoint (función (dirección) si (dirección === "abajo") $ (este) .css (posición: "fijo");) Explicación inicial tiene una manipulación mucho más complicada del comportamiento de desplazamiento.
Construido por Matt Dempsey, la infografía interactiva se basa en gran medida en las animaciones CSS3 y en las animaciones basadas en JavaScript impulsadas por Scrollorama de John Polacek, un complemento de jQuery creado básicamente para hacer exactamente los tipos de manipulaciones que Matt ha realizado..
Hablemos de contenido.
Para ambos sitios, el contenido es una de las claves para comprender las decisiones de diseño que se tomaron (como ocurre con cualquier diseño bien pensado). Explicar el resumen de alto nivel de Inception es una tarea muy diferente a la revisión pública de los logros y fallas del año pasado de una empresa de servicios de marketing por correo electrónico..
Para el Inicio explicado, el autor del contenido ha tomado una narrativa relativamente compleja y extrajo los puntos de la trama primaria en un nuevo medio.
Esta narrativa tiene un artefacto "hermano" (la película Inception) que el espectador debe haber visto previamente para identificarse adecuadamente con las decisiones de diseño. El sitio no funciona bien como una forma de vehículo de resumen de entretenimiento (en el que alguien que no ha visto la película puede obtener una "esencia" informativa y aún entretenida de la historia). En su lugar, sirve para ayudar a despejar las telarañas de confusión al desglosar los puntos de inflexión principales y mostrar indicadores que explican esos puntos de inflexión..
Si has visto Inception, entiendes que la construcción principal de la trama se divide en "niveles", que son representativos de "sueños dentro de los sueños". Inception Explicada lo lleva a través de estos niveles uno a la vez, utilizando algunos factores visuales constantes para ayudar a reducir la complejidad. En particular, los siete personajes principales y sus estados están representados visualmente por círculos a lo largo de la narrativa hacia la parte inferior de la página..
Más allá de esto, un indicador de fondo del lugar del nivel actual también es un indicador; Se muestra un avión para el nivel de "realidad", la camioneta de Yusuf para el Nivel Uno, el sueño de Arthur en un hotel en el Nivel Dos, montañas que representan la escena nevada en el Nivel tres y, finalmente, bares algo vagos que probablemente representan los edificios de la ciudad en el "Limbo " nivel. Todas estas imágenes, como cualquiera que haya visto la película entendería, son icónicas de los diferentes niveles representados en la película..
Un reloj animado se muestra en la parte superior derecha, que muestra la relación del tiempo con la realidad en cada nivel; a medida que los personajes se adentran en cada nivel, el tiempo se ralentiza (de modo que los minutos parecen décadas).
Se explica la trama y los iconos emparejados con animaciones simples representan puntos de inflexión en la trama. Los párrafos explicativos son el principal vehículo para que los usuarios entiendan el contexto de las animaciones y los cambios de estado..
La estrategia de contenido de MailChimp para "A Look Back" es muy diferente, por supuesto, de lo que se explica al comienzo. "Una mirada atrás" es el informe anual de MailChimp, que resume los aspectos cualitativos y cuantitativos de su desempeño en 2012..
La estrategia de contenido aquí sigue menos de una narrativa y, en cambio, se segmenta en una semblanza de "subnarrativas", impulsada por el marketing, los mensajes cuantitativos y una fuerte voz de marca. Estas diferentes subnarraciones están claramente segmentadas: "La aplicación", "Soporte", "Operaciones", "Social", "Geografía" y "Buenas ideas" son las secciones delineadas en la navegación, que se correlacionan directamente con los cambios visuales en el Diseño y segmentación de contenidos. Estas secciones están cubiertas por el admirable portavoz de MailChimp (Freddie) que mira la ciudad de Atlanta desde el principio y luego se dirige a la audiencia al final..
MailChimp aborda mucho terreno en términos de estrategia de contenido en este informe; en particular, el mensaje principal es la escala de impacto y crecimiento que MailChimp realizó en el último año. Una de las principales métricas de la prueba es lo primero en la primera subnarrativa: "Correos electrónicos enviados: 34,796,235,769". Esa es una gran cantidad de cualquier cosa, y eso es lo que sirve como prueba de que MailChimp hace el mejor correo electrónico.
Esta es una estrategia de "mejor paso adelante". Sin embargo, no termina ahí; MailChimp ha hecho un punto claro para retener una voz amigable que coincide con la fantasía de la mascota de Chimp, Freddie. En la misma sección, vemos un significante "Party-Poopers" (con un 1.9% de la base de usuarios de MailChimp en esta categoría).
Esto logra una sensación de transparencia al tiempo que conserva el tono general positivo y juguetón que MailChimp ha preestablecido. Aborda directamente lo malo, enmarcando la métrica como una experiencia divertida y entretenida para el lector. Podemos ver notas similares a lo largo de la estrategia de contenido para MailChimp.
Ahora vamos a cambiar para hablar sobre los detalles de implementación tecnológica..
Hay una gran diferencia en el rendimiento de estos dos sitios, principalmente debido a un factor importante: las bibliotecas de observación de desplazamiento operan en dos paradigmas muy diferentes para activar eventos de desplazamiento..
En Scrollorama, el código de animación se ejecuta en cada desplazamiento; este código de animación anima todos los objetos "capaces de animar", lo que provoca una gran cantidad de cálculos y repintado del navegador. Sin embargo, para la explicación inicial, este es el efecto más deseado, ya que cada píxel es relevante para las animaciones diseñadas. Este tipo de observación intensiva de desplazamiento y la función de animación posterior pueden causar que el navegador vuelva a pintarse en cada evento de desplazamiento. Desafortunadamente, para un sitio como Inception Explicado, esta técnica de observación de desplazamiento es necesaria para mantener con precisión un estado de animación para cada posición de desplazamiento individual..
Por otro lado, jQuery Waypoints permite la aceleración de los eventos de desplazamiento al establecer un tiempo de espera y una variable "didScroll".
Más allá de esto, la función onScroll tiene un conjunto reducido de funciones; en particular, verifica si se ha alcanzado un punto de ruta en particular (de ahí el nombre), y dispara las funciones definidas por el usuario cuando se alcanzan esos puntos de ruta. Esto permite mucho menos repintado de DOM, pero también requiere un sacrificio de flexibilidad, y puede que no funcione tan bien para animaciones más complejas basadas en fotogramas clave derivados de la posición de desplazamiento.
Si bien ambos proyectos han comprimido su código, podemos echar un vistazo a algunas de las funciones principales que utilizan los dos sitios..
Primero veremos la implementación de los puntos de paso de Mailchimp. (Nota: este código se ha modificado ligeramente de la versión original minifed para facilitar la lectura).
conjunto de funciones \ _active \ _sección (índice) $ (". section.fixed"). removeClass ("fixed"); $ (". section"). eq (index) .addClass ("fixed"); $ (". site-link.selected"). removeClass ("selected"); $ (". site-nav li: not (: has (#freddie))"). eq (index) .find (". site-link"). addClass ("selected"); $ (". section .content"). waypoint (función (evento, dirección) var current_section; current_section = $ (this) .parent (". section"); direction === "up" && current_section.index ( )> 0 && (current_section = current_section.prev ()); // can \ _animate \ _background establecido fuera de este código can \ _animate \ _background && (set \ _active \ _section (current_section.index ()); // fondo animado usa Modernizr para verificar si se puede usar CSS en lugar de animaciones JS animate_background (current_section.index ())) current_section.attr ("id") === "section-footer" && $ (". site-nav") .fadeOut (); if (direction === "up") devuelve $ (". site-nav"). fadeIn (); Así que vamos a pasar a través de este código para ver qué está pasando.
Primero, vemos una función que esencialmente recibe un índice de la sección para activarlo. Hace algunas cosas para secciones especiales (como las fotos de Freddie) y navs también.
La llamada de Waypoint y la devolución de llamada set_active_section, y verifique en qué dirección se alcanzó el objetivo. Mailchimp estableció el límite de desplazamiento en 0, también.
Mailchimp también está utilizando Google Analytics para ver qué secciones están mirando las personas, y ver cuánto tiempo les llevó mirar esas secciones para ver cuánto tiempo / participación invierte la gente en cada una de las secciones. Tener esta información permitirá a MailChimp ver la "ruta" del usuario más común, ya sea que la gente saltó por la página, se movió directamente a una u otra sección, o recorrió la página de forma secuencial, pasando la misma cantidad promedio de tiempo por sección.
Una nota rápida: la&& el operador actúa como "si esto es eso": algo && algo más es algo equivalente a if (algo) somethingelse; como && comprueba que el lado izquierdo sea verdadero antes de pasar al lado derecho. Inception Explicada utiliza un conjunto muy simple de funciones repetidas basadas en Scrollorama.
var a = $ .scrollorama (blocks: ".scrollblock"); a.onBlockChange (function () var b = a.blockIndex; $ ("# console"). css ("display", "block"). text ("onBlockChange | blockIndex:" + b + "| block actual: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality .bg", delay: 300, duración: 35E3, propiedad: "left", inicio: 100, final: 1100); a.animate ("# reality .bg", delay: 300, duración: 35E3, propiedad: "top", inicio: 120, final: 340); //… Este código se toma directamente desde el inicio de la secuencia de comandos explicada de inicio; Aquí, vemos un ejemplo de uso directo de la función animada de Scrollorama (que es diferente de la función animada de jQuery). Básicamente, estas llamadas están registrando fotogramas clave de elementos para que Scrollorama los vea y realice; por ejemplo, la primera llamada animada tiene un retraso de 300 píxeles, una duración de 35e3 (o 35k), un valor inicial de 100 y un valor final de 1100.
Esto significa esencialmente lo siguiente:
Explicación inicial tiene 300 llamadas .animate () similares a esta..
Podemos ver en ambos sitios una manipulación de interacción similar, con objetivos muy diferentes y efectos significativamente divergentes.
MailChimp y Inception Explained nos han mostrado la importancia de la estrategia de contenido y la elección de la herramienta adecuada para el trabajo; además, podemos esperar que la interacción de desplazamiento se desarrolle aún más, ya que los dispositivos táctiles continúan capturando la cuota de mercado y los gestos de desplazamiento / desplazamiento se desarrollan aún más como un patrón de interacción estándar.
