
Estuve de vacaciones la semana pasada y en una pequeña tienda de regalos en la playa estaban vendiendo este libro grande y grueso realmente genial llamado Ocean: A Photicular Book. Probablemente hayas visto algo así antes… una tarjeta de plástico que muestra diferentes imágenes dependiendo de cómo la mires. Este libro está muy bien hecho porque las imágenes son de muy alta calidad y el diseño del libro hace que las imágenes se muevan a medida que pasas las páginas.
Aquí hay un video rápido:
mira este libro es el mejor pic.twitter.com/isRLATp9im
—Chris Coyier (@chriscoyier) 13 de abril de 2017
Aquí hay una explicación de Dan Kainen:
Photicular, también conocida como fotografía lenticular o integrada, se concibió por primera vez a principios del siglo XX, pero el concepto básico existe desde 1692 cuando un pintor francés creó pinturas que revelaban una y luego la otra a medida que el observador caminaba. La forma más sencilla consiste en cortar dos imágenes en finas tiras verticales e intercalarlas, colocando frente a la imagen compuesta un plano de barrotes, a modo de valla, que solo permite ver una imagen a la vez a través de los huecos. En lugar de barras, se pueden usar lentes y se pueden intercalar más de dos imágenes, hasta docenas.
El resultado final es realmente genial en el libro Ocean. Después de mencionar este en Twitter, también escuché cosas buenas sobre Safari. Estoy seguro de que todos son impresionantes. ¡Es casi como los periódicos y las pinturas de Harry Potter!
Por supuesto, me hizo pensar en cómo podríamos hacer algo similar a Photicular en la web. Tenemos videos y GIF en la web, por lo que no es exactamente difícil hacer que las imágenes se muevan. Pero no es solo el movimiento en sí lo que hizo que estos libros fueran geniales, fue que se mueve junto con tus acciones (de pasar página).
Tal vez podríamos navegar a través de un GIF mientras un usuario se desplaza. ¿Puedes controlar programáticamente qué cuadro de GIF se muestra actualmente? Sorrrrrrta. No existe una tecnología nativa simple para eso, pero existen algunas alternativas.
Dennis Gaebel escribió sobre una técnica que vio en el sitio de Capser Mattress el año pasado.
En lugar de un GIF, puede usar un sprite de imagen e intercambiar qué parte de la imagen está mostrando a medida que se desplaza. Su demostración final está aquí:
Vea el lápiz Cómo animar un sprite bebiendo café con ScrollMagic de Envato Tuts+ (@tutsplus) en CodePen.
Si realmente quería quedarse con un GIF, BuzzFeed creó una biblioteca de JavaScript llamada libgif-js específicamente para ejercer control sobre los GIF de esta manera. A través de esta librería, puede saltar a ciertos cuadros, pausar e iniciar el GIF como lo hace con el video, e incluso hacer que los GIF sean “rompibles”, lo que significa que arrastrarlos hacia la izquierda y hacia la derecha frota el GIF hacia adelante y hacia atrás.
Para obtener super meta, aquí hay un GIF de mí jugando con un GIF “desechable”:
El aplastamiento es exactamente de lo que se trata el GIF, es la capacidad de desplazarse a través de los marcos de GIF lo que es interesante aquí. Bueno, aplastar la cabeza de Steve Buscemi también es interesante, pero sabes a lo que me refiero.
Relacionado
Hace una década, recuerdo a mi antiguo jefe, Tim Chatman, diseñando un libro animado de papel para un cliente nuestro.
No es Photicular, pero usa el mismo tipo de lengüetas de papel con ranuras que tiras para hacer que las imágenes cambien.
También recuerdo uno de mis libros favoritos de la infancia, Dinnertime, en el que aparecen diferentes animales mientras pasas las páginas.