-
Me llamo Lucas.
Soy ingeniero de Google Web Designer.
-
Me llamo Lucas.
Soy ingeniero de Google Web Designer.
-
Este vídeo es
la continuación de los anteriores
-
sobre cómo crear
documentos responsive con media rules.
-
Voy a explicar cómo
combinar animaciones con media rules.
-
Empezaremos con
un documento sencillo
-
que tiene un diseño vertical
cuando el viewport es estrecho
-
y un diseño horizontal
cuando el viewport es más ancho.
-
Ahora voy a
ampliar este documento
-
para que cuando tenga
un diseño horizontal y sea lo bastante alto
-
para que cuando tenga
un diseño horizontal y sea lo bastante alto
-
en lugar de una imagen,
tenga dos superpuestas al principio
-
y que luego se separen con una animación.
-
Dado que Web Designer
utiliza fotogramas CSS3
-
para representar animaciones
-
esta acción se puede
codificar con media rules.
-
Para empezar, voy a ir
al contenido de las reglas maestras
-
y voy a copiar
y pegar esta imagen.
-
Ahora, en otra imagen,
apuntaré a otro recurso.
-
Para ello, cambiaré
la ruta del recurso directamente.
-
Además, lo ocultaré
de forma predeterminada.
-
Ahora, vuelvo
a las media rules
-
y añado un punto
de interrupción de altura.
-
Como veis, estamos editando
la gama más amplia de alturas
-
así que voy a añadir un fotograma
-
para cada una de las imágenes.
-
Voy a moverlas verticalmente
utilizando la herramienta Trasladar.
-
Así.
-
Por último, definiré
la visibilidad de la segunda imagen
-
para que vuelva a ser visible.
-
Ya puedo arrastrar para ver
la vista previa de la animación.
-
Esta animación es responsive
-
porque las dos imágenes
juntas permanecen centradas
-
aunque el viewport cambie de tamaño.
-
Pero si salgo de
esta media rule y entro en cualquier otra
-
la animación desaparece.
-
Puede verse en la línea de tiempo
-
donde todos los registros
de seguimiento están vacíos
-
salvo en la media rule inferior derecha.
-
Ahora, supongamos que quiero
crear una animación predeterminada
-
donde esta imagen tenga
una opacidad gradual del 0 al 1.
-
Para ello,
desde las reglas maestras
-
voy a insertar un fotograma.
-
Voy a establecer
la opacidad básica en 0
-
y en el fotograma,
definiré la opacidad como 1.
-
Ahora vemos esta opacidad gradual
en el contenido de las reglas maestras
-
y si volvemos
a las media rules
-
vemos como
en cada una de ellas
-
se produce la misma
animación de atenuación.
-
Esta es la primera
-
esta es la segunda
-
y aquí está la tercera.
-
La única excepción es
la media rule inferior derecha
-
en la que he definido
una animación de anulación.
-
Lo único que
tenemos que corregir
-
es la opacidad básica de la primera imagen
-
que he cambiado a 0.
-
Solo hay que
volver a establecerla en 1.
-
Ahora vemos que
la animación se ha restaurado.
-
Siempre se puede saber si hay una animación
-
que ha anulado la media rule, porque su etiqueta
-
estará destacada en la línea de tiempo.
-
Al hacer clic en esta etiqueta
aparecerá una ventana emergente
-
donde se puede quitar
la animación de anulación
-
y utilizar
la animación básica si la hay.
-
Esto es todo lo que quería decir sobre
cómo combinar animaciones con media rules.
-
Esto es todo lo que quería decir sobre
cómo combinar animaciones con media rules.
-
Gracias por vuestra atención.
