Use el componente Paralaje para crear sensación de profundidad con capas de imágenes. A medida que el usuario desplaza la página hacia arriba o hacia abajo en un dispositivo móvil, las imágenes de fondo y de primer plano se mueven a velocidades distintas.
Este componente está diseñado para usarse exclusivamente en creatividades de Paralaje de Display & Video 360.
Para añadir el componente Paralaje a su proyecto:
- Abra el panel Componentes y, luego, la carpeta Interacción.
- Arrastre el componente Paralaje
a la escena.
- Haga doble clic en el componente para empezar a editarlo.
- Para añadir capas, arrastre imágenes de su sistema de archivos a la escena o al panel Capas (solo en Windows o en Mac), o bien haga clic en el botón Añadir imágenes
, situado en la parte inferior del panel Capas. Solo se pueden añadir imágenes como capas.
- Coloque cada capa donde quiera que se muestre al principio y al final de la animación mediante las pestañas Inicio y Fin. Puede arrastrar la capa donde quiera o bien utilizar los campos de posición Inicio y Fin del panel Propiedades. También puede añadir un estado medio colocando el cursor a la derecha de la pestaña Inicio y haciendo clic en el botón
.
- Defina otras opciones de configuración según sea necesario.
- Cuando le guste el resultado del componente, haga clic en Guardar; puede previsualizarlo mientras está trabajando en él. Volverá a la interfaz normal de Google Web Designer.
, situado en la parte inferior del panel Capas. Solo se pueden añadir imágenes como capas.
.Opciones de configuración
Para configurar el componente, haga doble clic en él en la escena. Si lo prefiere, selecciónelo y, en el panel Propiedades, haga clic en Configuración .
Añadir capas
Hay dos maneras de añadir una capa:
- Arrastre un archivo desde su sistema de archivos (solo para Mac o Windows) o desde el panel Biblioteca a la escena o al panel Capas.
- Haga clic en el botón Añadir imágenes
Las capas del componente Paralaje deben estar formadas por imágenes.
Mover capas
- Seleccione la capa que quiera mover.
- Seleccione la pestaña Inicio, Medio o Fin. Puede añadir un estado medio si aún no lo ha hecho.
- Coloque la capa. Para ello, siga uno de estos métodos:
- Arrastre la capa hasta la nueva posición.
- Use las teclas de flecha para mover la capa en intervalos de un píxel. Mantenga pulsada la tecla Mayús a la vez que pulsa una tecla de flecha para mover la capa en intervalos de 10 píxeles hacia la dirección de la flecha.
- Defina las propiedades de posición Inicio, Medio o Fin en la pestaña Propiedades de la capa. Solo puede editar las propiedades que coinciden con la pestaña actual. Utilice los botones Copiar posición inicial, Copiar posición media o Copiar posición final
para copiar la otra posición.
Cambie a otra pestaña para ajustar la posición de la capa en otro punto de la animación.
Intercambiar imágenes
- Haga clic con el botón derecho en la imagen de la escena que quiera sustituir y seleccione Cambiar imagen en el menú emergente.
- Seleccione una imagen de la biblioteca o haga clic en el botón Importar archivos
La nueva imagen sustituye a la original. Si había modificado el tamaño de la imagen sustituida, la nueva tendrá las mismas dimensiones. En caso contrario, se usarán las dimensiones originales de la imagen nueva.
Reordenar capas
En el panel Capas, arrastre una capa a su nueva posición en la lista.
El orden de las capas determina cuáles se muestran delante. Las capas que se encuentran más arriba en la lista se muestran por encima de las que se encuentran más abajo.
Eliminar capas
- Seleccione la capa que quiera eliminar.
- Pulse la tecla Supr o vaya a la parte inferior del panel Capas y haga clic en el botón Eliminar
.
Modificar el tamaño de las capas
- Seleccione la capa cuyo tamaño quiera modificar.
- En el panel Propiedades de la capa, defina la anchura y la altura en píxeles.
- Haga clic en el botón Limitar relación de aspecto
para elegir si la relación de aspecto entre la anchura y la altura se mantiene invariable.
- Haga clic en el botón Limitar relación de aspecto
La capa se ajusta al tamaño especificado mientras dure la animación.
Cambiar la opacidad de las capas
- Seleccione la capa que quiera cambiar.
- En el panel Propiedades de la capa, configure la opacidad inicial o la final con un valor comprendido entre el 0 (transparente) y el 1 (opaca).
Cambiar el easing de animación de la capa
- Seleccione la capa que quiera cambiar.
- En el panel Propiedades de la capa, vaya al menú desplegable Easing y seleccione un tipo de easing.
El easing no se puede personalizar.
Añadir un estado medio
Para controlar mejor la animación del componente Paralaje, puede añadir un estado medio y cambiar las propiedades de la capa en ese punto.
- Coloque el cursor a la derecha de la pestaña Inicio y haga clic en el botón
- De forma predeterminada, el estado medio se produce en un punto intermedio entre el inicio y el fin de la animación. Puede ajustar los tiempos de la animación.
- Cambie a la pestaña Medio para definir las propiedades de la capa en este punto.
Para eliminar el estado medio, coloque el cursor sobre la parte derecha de la pestaña Medio y haga clic en el símbolo X.
Cambiar los tiempos de la animación
Los tiempos de la animación del componente Paralaje se determinan según la distancia hasta la que se ha desplazado hacia dentro o fuera de la página. De forma predeterminada, la animación comienza cuando el borde superior del componente empieza a aparecer en la página (0 %) y termina cuando el borde inferior desaparece de la parte superior de la página (100 %). Si ha añadido un estado medio, también puede ajustar en qué momento de la animación se produce. Hay dos formas de ajustar los tiempos de la animación:
- En el panel Tiempo de la animación, arrastre las casillas de inicio, mitad y fin, o bien el control deslizante, hasta el porcentaje que quiera.
- Introduzca los porcentajes inicial, medio y final en los campos del panel Tiempo de la animación.
Ocultar y mostrar capas
En el panel Capas, haga clic en la casilla que se encuentra junto a la miniatura de la capa (debajo del botón Ocultar todas las capas ).
Puede hacer clic en el botón Ocultar todas las capas para ocultar o mostrar todas las capas.
Al ocultar una capa, puede trabajar mejor en otra y evitar que la capa oculta se muestre en la vista previa de configuración, pero no tiene ningún efecto en la vista previa del navegador ni en la creatividad publicada.
Mostrar y ocultar elemento inactivo
- Seleccione una capa.
- En el panel Propiedades de la capa, en Propiedades avanzadas, haga clic en el interruptor Mostrar elemento inactivo.
El elemento inactivo es una versión translúcida de la capa en las posiciones que no está editando, por lo que podrá comparar visualmente las posiciones inicial, media y final. Los elementos inactivos sirven solo de referencia y no se mostrarán en las vistas previas ni en el archivo publicado.
Propiedades
Propiedades del componente
Las propiedades del componente están en el panel Propiedades. Para verlas, debe salir del modo de edición del componente.
| Propiedad | Descripción |
|---|---|
| Nombre | El nombre del componente Paralaje. |
| Factor de desplazamiento | Un número entre 0 y 1 que representa cuánto se desplaza la vista. Solo se utiliza cuando se muestra el componente en la escena de Google Web Designer. La opción predeterminada es 0,5. |
Propiedades de la capa
Puede ver y editar las propiedades de la capa cuando se encuentra en el modo de edición del componente.
| Propiedad | Descripción |
|---|---|
| Nombre | El nombre de la capa. No se puede editar. |
|
Inicio |
Distancia de la capa, expresada en píxeles o como porcentaje, desde los bordes izquierdo y superior del componente cuando este se muestra por primera vez (es decir, cuando el borde superior del componente coincide con el borde inferior del viewport). Se puede editar cuando la pestaña Inicio está seleccionada. |
| Medio | Distancia de la capa, expresada en píxeles o como porcentaje, desde los bordes izquierdo y superior del componente en el estado medio de la animación. Se puede editar cuando la pestaña Medio está seleccionada. |
| Fin | Distancia de la capa, expresada en píxeles o como porcentaje, desde los bordes izquierdo y superior del componente cuando este deja de ser visible (es decir, el borde inferior del componente coincide con el borde superior del viewport). Se puede editar cuando la pestaña Fin está seleccionada. |
| Tamaño | La anchura y la altura de la capa. Afecta a la capa durante todo el transcurso de la animación. |
| Opacidad | La opacidad inicial y final de la capa, indicada mediante un número comprendido entre el 0 (transparente) y el 1 (opaca). |
| Easing | El tipo de easing de la animación de la capa. El easing no se puede personalizar. |
| Mostrar elemento inactivo | Cuando se habilita, se muestra una versión translúcida de la capa en las posiciones inactivas (es decir, las que no está editando). |
Eventos
El panel Eventos se puede utilizar para activar otras acciones en un anuncio. El componente Paralaje envía el evento siguiente:
| Evento | Descripción |
|---|---|
| Se ha cargado Paralaje | Se envía cuando el componente está listo para mostrarse. |
Vista previa
Durante la configuración
Puede obtener una vista previa del componente Paralaje mientras trabaja en él:
- Para entrar en el modo de edición del componente, haga doble clic en el componente de la escena.
- Haga clic en la pestaña Vista previa situada en la parte superior.
- Desplácese hacia arriba y hacia abajo para ver cómo se comportan las capas visibles en una muestra de diseño para dispositivo móvil. Las capas ocultas no se mostrarán.
- No puede editar el componente mientras está en la vista previa. Haga clic en la pestaña Inicio, Medio o Fin, realice los cambios necesarios y, a continuación, vuelva a hacer clic en la pestaña Vista previa para ver las modificaciones.
En el navegador
Para obtener una vista previa del componente en el navegador, salga del modo de edición del componente y, en Google Web Designer, haga clic en el botón Vista previa. La página de vista previa simula cómo se muestra el anuncio en una página web con contenido suficiente para que pueda desplazarse hacia arriba y abajo.
Puede seleccionar una de las siguientes opciones de modo de vista previa:
- Dispositivo: seleccione un dispositivo móvil o la opción Personalizado.
- Girar dispositivo:
alterne entre horizontal y vertical.
- Tamaño del viewport: si asigna Personalizado al dispositivo, puede definir un nuevo tamaño modificando este campo o arrastrando los controles diseñados para modificar el tamaño que se encuentran en la vista previa.
alterne entre horizontal y vertical.Los anuncios que contengan el componente Paralaje siempre utilizarán el modo de vista previa de Paralaje.