Share
Este verano comencé a construir un recuento moderno de "Alicia en el país de las maravillas", una aplicación web de cuentos interactivos llamada Alicia en Videoland. Terminó apareciendo en un artículo hermano de Adobe Inspire y se convirtió en una presentación ganadora de encore que di en CSS Dev Conf 2013. El proyecto estaba destinado a ser educativo, un campo de pruebas para nuevas técnicas de animación CSS y escritorios para -trabajo de JavaScript. Mantengo la fuente de Alice en GitHub, donde cualquiera puede examinar mi código, pero a veces es bueno que alguien repase el razonamiento contigo..
En este artículo cubriré algunos de los detalles más técnicos que ni mi charla ni el artículo de Inspire podrían examinar en profundidad:
Si desea obtener información sobre guiones gráficos, imágenes de retina, animaciones de CSS y otras interacciones, debe consultar el artículo complementario sobre Adobe Inspire. Además, antes de seguir leyendo, definitivamente debes jugar con el libro de cuentos.!
Mi objetivo era bastante simple: crear una aplicación de libro de cuentos que funcionara igual de bien en Chrome y en iOS Safari, específicamente en el iPad Retina. Eso sí, no estaba diseñando para un "contexto móvil", sabía exactamente dónde estaría mi público objetivo: en las conexiones wifi, en la comodidad de sus propios hogares, ya sea leyendo con sus hijos en su regazo o diseccionando el código en la oficina.
Eso me permitió preocuparme menos por la compatibilidad del navegador, un lujo que pocos en los entornos de producción pueden permitirse. Pero es importante que tengamos proyectos como este que salten por delante de la curva porque nos ayudan a pensar en lo que será posible mañana..
Siempre me había gustado "Alicia en el país de las maravillas" y "A través del espejo" mientras crecía, y me dediqué a investigar y desarrollar el nuevo mundo y los personajes que estaría creando con entusiasmo. Se debieron establecer claras diferencias en los estilos artísticos, desde el parque impresionista y estéril del mundo real hasta el motín de mediados de siglo del agujero del conejo..
Cada personaje debía tener su propia historia y personalidad. Debido a los plazos ajustados, solo pude dar vida a una pequeña parte del libro. Comencé reescribiendo la escena inicial (que puedes leer apagando el CSS o imprimiendo la página del libro de cuentos) y luego creando un guión gráfico para acompañarlo..
Obtenga más información sobre el proceso creativo, los personajes y los diseños de entorno que se incluyeron en "Alice in Videoland" en el artículo hermano que escribí para Adobe Inspire.Desde el ojo parpadeante hasta la persecución de Alicia, las animaciones se utilizan sutilmente a lo largo de la historia para dar la ilusión de la vida, no a diferencia de un libro emergente. Sin embargo, mientras que las animaciones de CSS son compatibles con todos los navegadores modernos, Internet Explorer 8 y versiones anteriores no las admiten.
Si ha revisado los informes de tráfico de su sitio y un número significativo de sus usuarios confía en Internet Explorer 8 o en una versión anterior (siempre verifica sus análisis antes de diseñar, ¿no?), Todavía puede admitir esos navegadores mientras ofrece la interacción completa a los navegadores modernos . La comunidad de desarrollo web ha enfrentado este problema anteriormente y ha desarrollado tecnologías ahora comunes como las fuentes web y AJAX. La solución es simple: los usuarios de los navegadores modernos obtienen la experiencia completa, mientras que los de los navegadores menos capacitados obtienen una experiencia inteligible y útil. Walt Disney podría haber llamado a esto "arrebatar" la experiencia del usuario. Los desarrolladores web lo llaman "mejora progresiva" o "degradación elegante", dependiendo de si construyes primero para navegadores más antiguos o más nuevos.
Cuando se trata de animación, me gusta tomar lo que llamo el enfoque de libro emergente. Para ilustrar, los siguientes videos son un ejemplo de una animación interactiva de tarjetas de regalo de Square.com diseñada por Madelin Woods. (Gracias, Madelin, por grabar estos!)
Las personas en Internet Explorer 8 y versiones inferiores aún estarán encantadas con la ilustración y no notarán que debería estar animada, mientras que las personas en los navegadores más nuevos se entretendrán en la animación.
En Alicia en Videoland, hice lo mismo. En la escena en la que el conejo blanco inconformista cruza la pantalla, lo hice centrado e inmóvil si no podía ser animado. Hice esto con modernizr.js.
Modernizr.js es un pequeño ayudante de JavaScript que puede colocar en un sitio para verificar si un navegador admite ciertas características como las animaciones y transiciones de CSS3. Si las características son compatibles, modernizr agrega las clases .cssanimations y .transiciones a la etiqueta HTML principal.
Configuré los estilos predeterminados del conejo para centrarlo en la página. Si las transiciones están habilitadas, uso la clase .csstransitions para volver a colocarlo fuera del lado izquierdo de la pantalla:
.conejo izquierda: -50%; // el conejo está centrado .csstransitions .rabbit left: -100%; // el conejo esta escondido del lado izquierdo de la pantalla
No es bueno comenzar a reproducir animaciones mientras todas las imágenes aún se están descargando. Necesitamos colocar una pantalla de carga hasta que todo esté listo para funcionar. jQuery pasa a tener un método llamado .carga que sólo dispara en tal ocasión. Di la html etiqueta una clase predeterminada de .cargando y usé el siguiente bit de jQuery para cambiar esa clase a .cargado Tan pronto como la página esté completamente cargada y renderizada:
Accentsconagua
$ (window) .load (function () // Es bueno establecer un tiempo de espera corto para que la página // de carga tenga tiempo para completar su animación setTimeout (function () // cambiar el estado a $ cargado ("html") .addClass ("cargado"). removeClass ("cargando");, 4000);); Vea la pantalla de carga Pen Alice in Videoland por Rachel Nabors (@rachelnabors) en CodePen
Es bastante fácil usar el CSS para la pantalla de carga al.cargando y .cargado clases Echa un vistazo a la línea 9 de la CSS en el ejemplo de código. los relleno en el contenedor transiciones a 0, haciendo que la pantalla de carga se "enrolle". Las líneas 108 a 128 controlan el animaciones que hacen que la taza y el platillo caigan después de agregar la .carga clase a su contenedor. Algunas de estas animaciones, como el conejo que se ejecuta, solo deberían ocurrir cuando el lector está leyendo esa parte de la historia. Es difícil saber exactamente dónde estarán los ojos de un usuario en un momento dado, pero podemos deducirlo utilizando el encantador complemento de jQuery Waypoints. Podemos usarlo para asignar una clase .in-view a cada página. Cuando se desplaza a la vista de la siguiente manera:
$ (". scene-park .page"). waypoint (function () // cuando esta .page se enfoca, dale una clase de "in-view" $ (this) .addClass ("in-view" );); Luego aplicamos los estilos de animación a la clase .in-view para que solo se activen después de desplazarse a la vista..
Originalmente, iba a animar el fondo detrás de Alice, pero a medida que avanzaba el proyecto, me di cuenta de que el efecto que realmente quería era que ella cayera hacia la parte inferior de la pantalla cuando los lectores se desplazaban hacia abajo. Los lectores tendrían que involucrarse con la historia para ver qué sucede a continuación, y serían recompensados no solo con una progresión hacia un objetivo (la parte inferior de la página), sino también con cambios en el estado de ánimo de Alicia de asustados, curiosos, adormecidos.
Primero, tuve que hacer a Alice pegajosa. Es decir, tenía que hacer que cambiara a una posición fija después de que el lector comenzara a desplazarse, para que no se desplazara por la parte superior de la página. Hice esto utilizando el práctico atajo de jQuery Waypoints para elementos pegajosos en lugar de intentar escribir mi propio sistema.
Para la parte de paralaje, me decidí por Skrollr, que funciona al tomar dos atributos de datos numéricos en un elemento, datos-distancia de píxeles e interpolando entre ellos, distancia de píxeles siendo la distancia desde la parte superior de la página en la que los cambios deben comenzar a ocurrir. Como los túneles están muy abajo en la página, utilicé JavaScript para medir su distancia desde la parte superior de la página, y utilicé su altura para obtener esos atributos de datos:
var tunnelTop = Math.round ($ tunnel.offset (). top); var tunnelTopData = "data-" + tunnelTop; var tunnelBottomData = "data-" + (tunnelTop + Math.round ($ tunnel.height ())); // Dale a Falling Alice sus medidas de skrollr como atributos de datos $ alice.attr (tunnelTopData, "top: 0%"). Attr (tunnelBottomData, "top: 80%");
Lo que me da algo como:
Vea el bolígrafo Falling Down the Rabbit Hole por Rachel Nabors (@rachelnabors) en CodePen
En Safari en iOS, cuando inicia un desplazamiento, toca la pantalla, desliza el dedo hacia arriba o hacia abajo y luego levanta el dedo de la pantalla. Para ahorrar energía, Safari no hace nada mientras su dedo toca la pantalla. Detiene todas las animaciones y ni siquiera ejecuta JavaScript hasta que le quitas el dedo..
En su lugar, toma una instantánea de la pantalla y la mueve en la dirección de su dedo, dando la ilusión de que está desplazándose como lo hace en el escritorio. Pero si la página contiene animaciones, la ilusión se rompe con cada desplazamiento de su dedo. Esto significa que una persona puede desplazarse hasta el fondo del agujero sin detenerse una vez para notar que el estado de ánimo de Alice está cambiando o que está cayendo:
Skrollr viene con una función amigable para dispositivos móviles de forma predeterminada, que intenta solucionar este problema aplicando una transformación CSS a toda la página y luego animándola a una nueva posición con CSS en el desplazamiento. Sin embargo, este método omite los eventos de desplazamiento que los Puntos de ruta requieren para cambiar las actitudes de Alicia:
Aquí es donde perdí el vapor. Consideré configurarlo para que la secuencia descendente fuera una animación en el iPad y una interacción de desplazamiento en el escritorio, pero detestaba la idea. Primero, tendría que mantener dos interacciones separadas y segundo, si estuviera animando gran parte del cuento, ¿por qué no lo hice solo para hacer un video??
El punto de la interacción de desplazamiento es que atrae a los lectores a la historia; ellos controlan a alicia Ellos son alicia Los compromete. Si todo lo que tienen que hacer es hacer clic en el agujero del conejo, ¿cuál es el punto de eso??
Me puse en contacto con muchos propietarios de repositorios y consulté a Stack Overflow en busca de una solución. Fue John Polacek, uno de los mantenedores de otra biblioteca Super Scrollorama, quien me sugirió que echara un vistazo a Hammer.js, una pequeña biblioteca de JavaScript para manejar gestos como pellizcar y deslizar en dispositivos móviles (que tiene una versión que se conecta directamente a jQuery !) Miré la biblioteca desde el principio en el desarrollo y opté por no seguirla, pero decidí volver a buscar.
Pasé mucho tiempo viendo cómo la gente se movía a través de la historia con el toque en el iPad. Me di cuenta de que no se estaban desplazando hacia abajo de la página, sino que se estaban deslizando. Pensé que si pudiera mapear el avance de la historia por una página a una acción de deslizamiento, todavía podría mantener una relación bastante estrecha entre las experiencias de escritorio y táctil. Hammer.js me permitió conectarme a los eventos de deslizamiento en el iPad, y pude hacerlo de manera que al pasar, los lectores pasaron a la siguiente página:
if (Modernizr.touch) // Pase a la página anterior $ (documento) .hammer (prevent_default: true). en ("swipedown", función (evento) scrollPageIntoCenter ($ (". page"). get ( prevPage)) currentPage = prevPage; calcPrevNext (currentPage);); Esta es una simplificación masiva del código. Para este caso de uso basado en el tacto, tuve que recurrir al seguimiento de las páginas actual, anterior y siguiente mediante el uso de variables de contador. También hay algunas cosas interesantes que suceden al recalcular las alturas y otras en entornos cambiantes. Le recomiendo que eche un vistazo al código fuente (¡anotado de forma útil!) Si realmente quiere ensuciarse las manos.
Uno de los problemas con el desarrollo para iPads es que los clics no se asignan directamente a los toques. Cuando tocas un enlace en iOS Safari, hay una ligera pausa mientras el sistema verifica que no vas a hacer algún tipo de gesto. Pregunta: "¿Estás seguro de que quieres seguir ese enlace? ¿O estás pellizcando o haciendo doble clic? "Esto hace que las interacciones basadas en clics se sientan lentas y poco naturales..
En nuestro caso, cuando se hace clic o se toca el agujero de conejo, queremos que ejecute el por el agujero() Función que desplaza la página hacia abajo en la tierra. La solución es usar ambos hacer clic y toque oyentes del evento! Rodney Rehm me ayudó a hacer una versión más eficiente de mi original activar() método. Después de lo cual, es fácil llamar así:
$ ("# to-tunnels"). active (downTheHole); Alice in Videoland siempre será un trabajo en progreso para mí. A medida que el tiempo lo permite, puedo volver para expandir la cantidad de dispositivos y navegadores en los que se desempeña a la perfección. O puedo avanzar y agregar nuevos capítulos a la historia para demostrar cosas como lienzo, animaciones SVG o la API de animación web..
Siempre estoy abierto a nuevas formas de escribir código y hacer que el código antiguo se ejecute más rápido. Espero que "Alice" sirva como una demo larga y elegante de cosas a la vuelta de la esquina para el diseño de interacción..
