Lo que dice.
Textos, fotos, enlaces y elementos de las listas: lo que el tile cuenta.
Cómo se ve.
Colores, tipografías, bordes, espacios y medidas, también distintos para ordenador, tablet y teléfono.
Cómo se comporta.
Cuándo entra en escena, cómo se mueve, a quién se muestra, dónde se coloca. Los ejemplos del catálogo apenas la tocan.
Entra en escena.
35 animaciones para la llegada del tile: fundido, desplazamiento, zoom, rotación, rebote, máquina de escribir, cortinilla… Se ajustan duración, retraso, intensidad y curva: tiles distintos pueden entrar uno tras otro.
Vuelve en cada pasada.
Otras 17 animaciones, del fundido al Ken Burns, que arrancan cuando el tile llega a la pantalla. Pueden volver a arrancar cada vez que pasas de nuevo y hacer entrar en secuencia lo que el tile contiene.
Sube un poco
y vuelve a bajar: entra de nuevo cada vez.
Se mueve con la página.
Mientras te desplazas, el tile se mueve, gira, cambia de tamaño, de transparencia o de desenfoque, a un ritmo propio. Cada propiedad tiene sus propias etapas, del principio al final del trayecto.
Sigue una curva.
Dibujas un recorrido en el builder y el tile lo sigue mientras te desplazas. En cada etapa decides posición, rotación, tamaño y transparencia.
Se queda donde hace falta.
El tile se queda quieto mientras el resto de la sección se desplaza, y vuelve a moverse solo cuando la sección termina: un índice, una foto, un botón de compra. Arriba o abajo, a la distancia que quieras, también en el teléfono.
Lo estás viendo: en ordenador y tablet, la lista de los ocho efectos junto a este texto usa justo esta opción.
Responde al ratón.
La inclinación 3D sigue al puntero, incluso solo en las fotos de una galería. El tile puede perseguir el cursor, o encender una linterna que invierte los colores bajo el puntero. Y para todo el sitio están el cursor magnético, que se agarra a enlaces y botones, y la mira con coordenadas. En el teléfono, donde no hay ratón, la página se queda como está.
Enciende
la luz.
Nunca está quieto.
Ocho movimientos que se repiten sin fin: flotación, también con rotación, pulsación, rotación, balanceo, rebote, oscilación y respiración. Velocidad, amplitud, retraso y dirección se ajustan: perfectos para iconos, badges y decoraciones.
Toma forma.
Recorta el tile en una forma: círculo, elipse, triángulo, hexágono, estrella, diamante, blob, o una forma tuya escrita en CSS. Vale para fotos, vídeos, cards y textos.
Cada foto se detiene a una distancia distinta de arriba: al desplazarte, la siguiente se posa encima. Son cuatro tiles con el Scroll fijo, nada más.
Desplázate despacio y mira cómo se forma la baraja.
A quien hace falta,
cuando hace falta.
Un tile puede estar para unos y no para otros. Las condiciones las controla el servidor: quien no debe ver el tile ni siquiera lo recibe.
Ventana ancha:
estás en el ordenador.
Ventana mediana:
quizá un tablet.
Ventana estrecha:
estás en el teléfono.
Aquí hay tres frases, una por formato, y solo ves una. En el ordenador, prueba a estrechar la ventana.
Exactamente
donde quieres.
Normalmente un tile ocupa todo el ancho de la columna y sigue a los demás. Pero puedes moverlo, superponerlo o fijarlo en la pantalla, con valores distintos para cada dispositivo.
Para quien lee,
y para quien busca.
Los mismos tiles hablan bien a los lectores de pantalla y a los buscadores, sin plugins adicionales.