ztext.js

¡Un proyecto genial de Bennett Feely! Convierte cualquier tipo de web en letras 3D con un efecto de mouseover que mueve los objetos 3D en el espacio. Recuerda a Zdog , pero por el tipo. Hace su magia apilando un montón de copias de los glifos una encima de otra que están compensadas por some translateZy luego usando some perspectivey rotateX/ rotateYen un elemento principal para hacer las cosas interactivas.

El efecto es extremadamente divertido. No puedo creer que Fisher-Price no lo haya implementado ya en todo el sitio.

En cuanto a la accesibilidad, tengo algunas preguntas. Incluso en el h1sitio web, se convierte en ocho h1elementos, lo cual no puedo imaginar es genial para los lectores de pantalla, sin mencionar la gran cantidad de spanelementos que contiene. Creo que podrías mitigar parte del problema con un contenedor monoparental usando un aria-label, ¿no?

Copiar y pegar también tiene resultados extraños. Si copio una palabra, tiendo a obtener justo lo que quiero. Pero si copio desde antes de la palabra hasta después de ella, obtendré todas las copias adicionales, lo cual definitivamente no quiero. Quizás eso se pueda solucionar con un poco user-select: none;de baile.

¡Tampoco se trata sólo de tipografía! El ejemplo de Bennet en un imges claro en cómo se parece a imprimir una fotografía en un lienzo (del mundo real) y estirarla alrededor del marco para que incluso los bordes tengan color.

Mi favorito es cómo se ve svg. Muy guay.

Enlace directo →