Soluciones simples para el diseño web dinámico con atributos de datos HTML5
Los efectos vívidos en los sitios web podrían brindarle una ventaja en la competencia por la atención del usuario. El desplazamiento de Parallax podría ser lo que está pensando ahora. Sin embargo, esa no es la única opción para el diseño web dinámico.
Atributos de datos HTML5: invisibles, pero no innecesarios
Los atributos de datos HTML5 le permiten almacenar cualquier dato dentro de un código fuente válido. Los datos etiquetados con atributos de datos no se muestran al usuario y no afectan el diseño. No obstante, existen en el sitio y se pueden procesar fácilmente, utilizando JavaScript, por ejemplo.
Fragmentos de texto dinámicos con dynamo.js
dynamo.js es un JavaScript bastante simple y casi infalible del desarrollador Jordan Scales, cuya principal ocupación es trabajar para Khan Academy. La tarea de dynamo.js es equipar animaciones al contenido de texto de una manera que permita que los componentes de texto se intercambien dinámicamente. Al principio, esto suena realmente innecesario, pero, tras una investigación más detallada, ofrece varias opciones interesantes.
dynamo.js se centra en el intercambio de partes de texto. (Captura de pantalla: Noupe)
dynamo.js funciona con atributos de datos HTML5 y una clase CSS llamada dynamo, que la función .dynamo() es aplicado a. Para darle un significado completamente nuevo a la siguiente oración
I wish I had wings
dynamo.js podría usarse de la siguiente manera:
I wish I <span class="dynamo" data-lines="had ten million Dollars,was always right,was on vacation">had wings</span>
Ahora, dynamo.js pasaría por las oraciones dentro del atributo de datos data-lines, cambiando cada tres segundos. El resultado será el siguiente (sin el marcado en negrita):
desearía que yo tenía alas
desearía que yo tenía diez millones de dólares
desearía que yo siempre tuvo la razón
desearía que yo estaba de vacaciones
Este y otros efectos se pueden comprobar en el sitio web de dinamo. A diferencia de lo que hice aquí, es mejor que escribas caracteres especiales en sus respectivos entidades. Dynamo.js puede ser muy específico cuando se trata de eso.
Además de la designación del contenido rotativo, los atributos data-speed y data-delay controlar la velocidad de la rotación. El atributo data-center centra el contenido del texto dentro del intervalo. Generalmente hablando, .dynamo() se puede aplicar a todos los elementos. Una combinación salvaje dentro del mismo texto puede conducir a una alienación casi caótica del contenido.
El guion es disponible para uso gratuito en GitHub, bajo la licencia del MIT. Requiere jQuery.
Animaciones con skrollr
skrollr permite la animación de cualquier atributo CSS de un elemento, dependiendo de la posición de la barra de desplazamiento horizontal. Suena complicado, pero no lo es.
La demostración de skrollr muestra lo que funciona, pero no es realmente llamativo. (Captura de pantalla: Noupe)
La animación se controla mediante atributos de datos. El siguiente fragmento de código (bastante simple, en comparación) conduce a un cambio en el color de fondo mientras se desplaza.
<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);"></body>
El atributo data-0 indica la posición original, mientras que el correspondiente data-end indica la posición final. Skrollr calcula automáticamente las etapas intermedias.
Los controles se realizan a través de fotogramas clave del DOM, por lo que puede ser muy preciso. Esto hace posible crear animaciones extremadamente complejas, como se ve en la sitio web de ejemplo.
No se requieren conocimientos de JavaScript para utilizar la funcionalidad skrollr. Sin embargo, debe tener alguna habilidad con CSS.
Como se usa CSS dentro de los atributos de datos, sus opciones son casi ilimitadas. Skrollr se encarga automáticamente del tedioso prefijo del proveedor, ya que un prefijo manual dentro de la sintaxis de skrollr ni siquiera sería posible.
skrollr no necesita ningún soporte en forma de jQuery u otras bibliotecas y solo pesa alrededor de 12 Kilobytes. La pequeña biblioteca de animación fue desarrollada principalmente por Alexander Prinzhorn y está disponible para uso gratuito bajo la licencia MIT en GitHub.
Tenga en cuenta que skrollr no ha estado en desarrollo activo durante casi cuatro años, desde septiembre de 2014, como afortunadamente Alexander le dice a sí mismo. Esto se convertirá en un problema en un momento en el futuro cuando se utilicen navegadores modernos y versiones móviles.
Por otra parte, skrollr funciona de manera diferente en dispositivos móviles que en el escritorio tal como está. La biblioteca reconoce el acceso móvil y desactiva el desplazamiento nativo. El desplazamiento simulado se realiza mediante transformaciones CSS basadas en eventos táctiles. Según tengo entendido, este concepto debería seguir siendo viable durante un tiempo.
Eckwerk muestra que skrollr permite a los usuarios crear diseños realmente prolijos y dinámicos. (Captura de pantalla: Noupe)
Sobre este sitio, el desarrollador ha compilado una lista bastante larga de usuarios de la biblioteca. Personalmente, me gusta mucho el sitio del Eckwerk. En contraste con la presentación más bien teórica y seca de la biblioteca en el específicamente creado página de demostración, Eckwerk muestra de lo que es capaz skrollr cuando se usa con contenido interesante y un diseño vívido.
(El artículo fue escrito originalmente en alemán por nuestro autor Dieter Petereit para nuestra revista hermana Dr. Web).
#Soluciones #simples #para #diseño #web #dinámico #con #atributos #datos #HTML5
