Aprenda a añadir y utilizar diferentes efectos de desplazamiento, como pieza a pieza, menú de escala desigual y efecto enrollado, entre otros.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Ideas de diseño para efectos de desplazamiento

En esta sección podrá echar un vistazo a algunas de las numerosas formas de utilizar efectos de desplazamiento para añadir funciones interactivas, navegación exclusiva y gráficos de movimiento de lo más expresivos a los sitios de Muse.

Para empezar, siga estos los pasos:

  1. Visite el sitio de muestra y haga clic en cada sección para ver ejemplos de cada efecto. Desplácese por cada página de muestra para ver cómo los efectos de desplazamiento controlan el modo de visualización de los elementos de la página.
  2. Desplácese hasta el final del sitio de muestra para descargar el archivo .muse.
  3. Abra el sitio de muestra y revise el proyecto en el espacio de trabajo de Muse.
  4. Abra el panel Capas y expanda la sección Contenido etiquetado para ver los elementos utilizados en la creación de cada ejemplo.

Efecto pieza a pieza

Este efecto consigue que un conjunto de elementos individuales entren volando y se reintegren en el diseño de la página a medida que el visitante se desplaza hacia abajo por página. Los gráficos y marcos de texto se controlan mediante efectos de desplazamiento que crean compilaciones interactivas, como si se tratasen de piezas de un puzle que encajan. Es una forma original de mostrar detalles de producto en una página web.

El flujo de trabajo de este ejemplo utiliza la sección Movimiento inicial situada en la ficha Movimiento del panel Efectos de desplazamiento para conseguir que los elementos se reúnan en un diseño consolidado. Una vez que cada pieza se coloca en su lugar, la configuración del Movimiento final se establece en 0 para evitar que los elementos existentes se muevan a medida que aparecen volando los nuevos elementos.

Siga estos pasos para crear un efecto pieza a pieza similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el sitio de muestra, la altura mínima de la página está configurada a 14 120 píxeles.
  2. Utilice la herramienta Texto para crear un marco de texto e introducir el contenido de texto deseado.
  3. Abra la ficha Movimiento del panel Efectos de desplazamiento y active la casilla de verificación de Movimiento. En este ejemplo, la configuración de la sección Movimiento inicial provoca que el marco de texto se desplace hacia abajo, hasta su lugar, a 0,25 veces (una velocidad de 1/4) la velocidad de desplazamiento. Cuando la página llega a la posición clave del marco de texto, el marco de texto alcanza el lugar donde se encuentra en la vista Diseño. A continuación, la configuración de Movimiento final (valor 0 para ambas direcciones) hace que el primer elemento permanezca en su lugar, como si el elemento estuviera fijo.
  4. Se coloca un archivo PNG con transparencias (un contorno de teléfono móvil) por debajo del marco de texto. Este elemento utiliza la configuración de la ficha Movimiento en el panel Efectos de desplazamiento para aparecer volando por la izquierda de la página, desplazarse hasta su lugar y quedarse allí.
  5. Detrás del esquema de teléfono, muy próximo, un elemento blanco de menor tamaño sigue un patrón de desplazamiento similar; aparece volando por la izquierda de la página para, a continuación, permanecer en su lugar. El gráfico blanco simula el auricular en la parte superior de un teléfono móvil. Este activo (denominado phone-earpiece.png) se sitúa sobre el esquema del teléfono móvil en el panel Capas, de forma que aparece por encima del esquema de teléfono en el diseño. 
  6. Directamente detrás del auricular, un pequeño elemento blanco que simula el botón de inicio del teléfono aparece volando por la derecha, imitando el comportamiento del auricular y mostrándose por encima del contorno del teléfono móvil en el diseño.
  7. A continuación, un gráfico rectangular de color claro, con un degradado sutil que fluye verticalmente del blanco al gris claro, utiliza la ficha Movimiento del panel Efectos de desplazamiento para colocarse en su lugar, de forma que se ajusta perfectamente al interior del área central del contorno del teléfono móvil. Una vez en su sitio, permanece en su lugar simulando la pantalla de un teléfono. El elemento de la pantalla (phone-screen.png) se encuentra dispuesto en capas en la parte inferior del panel Capas, por lo que aparecerá detrás de todos los demás elementos en el diseño de la página.
  8. Un conjunto de cuatro rectángulos (con relleno de color azul, verde, amarillo y rojo uniformes) se desplaza a la posición siguiente. Para crear el efecto de que se dispersan a la vez, cada uno de los rectángulos se configura con direcciones y velocidades diferentes en la ficha Movimiento del panel Efectos de desplazamiento. El rectángulo azul se desplaza hacia abajo y hacia la derecha; los rectángulos verde y amarillo se desplazan hacia arriba y hacia la derecha; y el rectángulo rojo se desplaza hacia arriba y hacia la izquierda en la sección Movimiento inicial. En la sección Movimiento final, todos los rectángulos tienen el valor 0 para ambas direcciones, lo que provoca que cada elemento se comporte como si estuviera fijo una vez alcanzada su posición definitiva en la parte superior de la pantalla del teléfono móvil.
  9. Cuando se han integrado todas las piezas restantes, un segundo campo de texto se desplaza hacia arriba hasta situarse bajo el primer campo de texto, a 0,5 veces (la mitad) la velocidad de desplazamiento de la página.

Por último, quedan dos elementos en la parte inferior, un rectángulo con el mismo color de relleno uniforme que la página (lo que lo vuelve invisible en el diseño) y un grupo de objetos (un rectángulo amarillo con un gráfico de bombilla) tras él.

El rectángulo de color uniforme está ahí para ocultar el grupo de objetos que se encuentra tras él.

Efecto de desplazamiento pieza a pieza de Adobe Muse
Efecto de desplazamiento pieza a pieza de Adobe Muse

Nota:

con ambos elementos seleccionados, observe que los valores que coinciden para todos elementos seleccionados se muestran en los campos. En este ejemplo, tanto el rectángulo como el grupo tienen la dirección vertical de la sección Movimiento inicial y de la sección Movimiento final configuradas a 0. No se muestra ningún valor en el campo horizontal de la sección Movimiento inicial, ya que el grupo está configurado para desplazarse a la izquierda a 1 vez (la misma velocidad) la velocidad de desplazamiento, mientras que el rectángulo está configurado a 0.  

  1. El rectángulo básicamente se encuentra fijo en su sitio y no se mueve porque todos los valores de los campos Movimiento inicial y Movimiento final están configurados a 0. A medida que la página se desplaza a la posición clave del grupo que contiene el gráfico de bombilla, este se mueve hacia la izquierda y se vuelve visible porque ya no lo oculta el rectángulo situado sobre él. El grupo de la bombilla se encuentra dispuesto en capas sobre el elemento de la pantalla del teléfono móvil y bajo el contorno del teléfono móvil, por lo que el gráfico de bombilla parece desplazarse hasta su lugar del mismo modo que ocurriría al arrastrar horizontalmente la pantalla del teléfono. El grupo de la bombilla cubre el rectángulo degradado que representaba previamente la pantalla de un teléfono.

Como se aprecia en este sencillo ejemplo, puede utilizar una combinación de una página muy larga, una serie de elementos estratégicamente dispuestos en capas en el panel Capas y la ficha Movimiento del panel Efectos de desplazamiento para crear la ilusión de que las piezas se reúnen en la misma animación a medida que la página se desplaza hacia abajo.

Menú de escala desigual

El efecto de menú de escala desigual utiliza los mismos principios descritos en el efecto pieza a pieza. Con la ficha Movimiento inicial en el panel Efectos de desplazamiento, los elementos aparecen volando y los rectángulos ocultan algunos de los elementos hasta que llegue el momento de volverlos visibles en el diseño de la página.

Este ejemplo utiliza grupos de rectángulos estratégicamente colocados para crear la apariencia de un diseño angular complejo.

Consulte el sitio de muestra en un navegador para ver cómo el avión vuela horizontalmente por la página de derecha a izquierda, seguido de un conjunto de opciones de menú estilizadas y un fondo de degradado con tiras diagonales.

Siga estos pasos para crear un efecto de escala desigual similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página está configurada a 4,665 píxeles.
  2. La imagen del avión está dispuesta en capas sobre el resto del contenido de la página, de modo que encabeza la lista en el panel Capas. Está configurada para desplazarse hacia la izquierda tanto antes como después de alcanzar la posición clave en la ficha Movimiento del panel Efectos de desplazamiento.
Menú de escala desigual en los efectos de desplazamiento de Adobe Muse
Menú de escala desigual en los efectos de desplazamiento de Adobe Muse

  1. Se han configurado cuatro marcos de texto para que aparezcan volando por la izquierda y se apilen verticalmente con objeto de crear el menú de navegación. En la ficha Movimiento del panel Efectos de desplazamiento, cada marco de texto tiene la misma velocidad (1,25 veces la velocidad de desplazamiento) en la sección Movimiento inicial. Cada marco de texto cuenta con una posición clave diferente. Aunque la página se desplaza hacia abajo, cada marco de texto se desliza hasta su posición, alineándose a la izquierda del diseño. Todos los marcos de texto cuentan con valores 0,0 en la sección Movimiento final, lo que provoca que los elementos del menú permanezcan en su lugar una vez que alcanzan dicha posición.
  2. Los marcos de texto se rellenan con un color de fondo uniforme, aunque a primera vista parezcan imágenes porque muestran lados cortados en diagonal, en lugar de bordes rectos verticales. Este efecto se consigue superponiendo un grupo de tres rectángulos sobre los marcos de texto, que se rellenan con el mismo color uniforme que el color de relleno del navegador.
Agrupe y organice los rectángulos sobre los elementos de menú para crear ángulos en los bordes izquierdo y derecho.
Agrupe y organice los rectángulos sobre los elementos de menú para crear ángulos en los bordes izquierdo y derecho.

  1. La animación de marcos de texto se oculta bajo otro grupo de rectángulos, ya que los marcos de texto se encuentran bajo el grupo en el panel Capas. El grupo es una combinación de tres rectángulos: un rectángulo de mayor tamaño con un degradado vertical y otros dos rectángulos más pequeños (uno cuadrado y otro rotado) que se rellena con un color uniforme coincidente con el color superior del degradado.
  1. Si se desplaza hacia abajo para revisar la parte inferior del grupo, verá una serie de cuatro rectángulos adicionales con diferentes anchuras, rotados y alineados sobre la esquina inferior derecha del rectángulo degradado de mayor tamaño.
Rote los rectángulos del mismo color que el relleno de la página para recortar la esquina del rectángulo con relleno degradado.
Rote los rectángulos del mismo color que el relleno de la página para recortar la esquina del rectángulo con relleno degradado.

Los grupos son ideales para combinar un conjunto de elementos y controlarlos como un único elemento. En este ejemplo se han aplicado efectos de desplazamiento a los distintos grupos de rectángulos para hacer que el grupo se traslade como un elemento individual.

Este ejemplo también ilustra el uso creativo del espacio negativo. Si el relleno del navegador contiene un color de fondo uniforme, puede realizar muchos efectos de recorte interesantes colocando rectángulos con rellenos del mismo color en varias capas, unos sobre otros. En lugar de diseñar gráficos en un programa de edición de imágenes y colocar una única imagen, puede utilizar rectángulos para crear gráficos en el espacio de trabajo de Muse.

Transición

Este ejemplo de un amanecer y un atardecer animados se obtiene mediante una combinación de dos efectos de desplazamiento: movimiento y opacidad. Este ejemplo muestra un fondo de página de relleno de color degradado con una única imagen PNG del sol. La imagen PNG incluye áreas transparentes que permiten que se muestre el color de relleno del fondo de página.

Abra el sitio de muestra en un navegador para comprobar cómo el sol va apareciendo desde una transparencia del 100 % a medida que se desplaza por la página. En su punto álgido el sol es totalmente opaco, pero a medida que desciende por la página, el sol se pone y se vuelve cada vez más transparente hasta que se desvanece.
Siga estos pasos para crear un efecto de transición similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor superior al de visualización media del monitor, de forma que la página pueda desplazarse. En este sitio de muestra, la altura mínima de la página está configurada a 2988 píxeles.
  2. La imagen del sol se sitúa en el centro de la página. En la ficha Movimiento del panel Efectos de desplazamiento, la posición clave está configurada a 1410 píxeles. Tenga en cuenta la configuración de las secciones Movimiento inicial y Movimiento final.
Configurar el Movimiento Inicial y el Movimiento Final para el efecto Transición.
Configurar el Movimiento Inicial y el Movimiento Final para el efecto Transición.

Esta configuración hace que el sol siga un patrón de desplazamiento semicircular; sube desde la parte inferior izquierda de la página formando un arco hasta el centro (hasta alcanzar la posición clave) y luego desciende hasta la parte inferior derecha de la página.

  1. Con el sol todavía seleccionado, haga clic en la ficha Opacidad para ver la configuración. La posición de transición 1 está configurada a 726 píxeles (sobre el sol). La posición de transición 2 está configurada a 1925 píxeles (bajo el sol). El sol comienza teniendo una opacidad del 0% (completamente transparente) para ir oscureciéndose de nuevo a medida que la página se desplaza hasta alcanzar su posición clave. Una vez alcanzada la posición clave del sol y a medida que la página se desplaza hacia abajo, la opacidad cambia del 100 % al 0 % de opacidad para crear un efecto de intensificación y atenuación.
Ajuste la cantidad de transparencia en la ficha Opacidad del panel Efectos de desplazamiento.
Ajuste la cantidad de transparencia en la ficha Opacidad del panel Efectos de desplazamiento.

  1. Pruebe la página seleccionando Archivo > Vista previa de página en navegador. Desplácese por la página para ver salir el sol mientras va volviéndose más opaco y, a continuación, ocultarse por la derecha mientras va difuminándose.
  2. Cierre el navegador y regrese al espacio de trabajo de Muse.

Edge Animate

Este ejemplo muestra cómo controlar archivos OAM exportados desde Adobe Edge Animate utilizando efectos de desplazamiento. En este ejemplo, la página se rellena con un degradado vertical que empieza con un color turquesa claro para pasar al azul oscuro.

Una combinación de ajustes aplicados a las etiquetas Movimiento y Adobe Edge Animate crea este efecto animado.

Tres instancias del mismo archivo OAM se colocan horizontalmente en paralelo para crear una fila de brújulas animadas. Cuando ve el sitio de muestra en un navegador, las tres brújulas ascienden para mostrarse y después se mantienen en su lugar. Cada una de las tres brújulas parece girar a diferentes velocidades, pero es la configuración en el panel Efectos de desplazamiento, no la creación del archivo de Adobe Edge Animate, la que consigue este efecto.

Siga estos pasos para crear un efecto similar con tres archivos OAM:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el sitio de muestra, la altura mínima de la página está configurada a 7465 píxeles.
  2. Seleccione las tres instancias de la brújula en la página. En la ficha Movimiento del panel Efectos de desplazamiento, puede ver que los tres archivos OAM tienen la misma configuración de movimiento y posición clave, ya que se muestran todos los valores.
Crear efectos animados para archivos OAM mediante efectos de desplazamiento
Crear efectos animados para archivos OAM mediante efectos de desplazamiento

Si realiza la vista previa de la muestra en un navegador, verá los tres elementos OAM saltar al unísono y mantenerse en fila como si estuvieran fijos.

  1. Haga clic lejos de las brújulas para anular la selección de las tres y, a continuación, seleccione solo la brújula de la izquierda. Mantenga pulsada la tecla Mayús mientras hace clic en la brújula de la derecha para seleccionar ambas. Abra la ficha Adobe Edge Animate del panel Efectos de desplazamiento y revise la configuración.
Anular la selección de las tres brújulas y seleccione la brújula de la izquierda y la de la derecha.
Anular la selección de las tres brújulas y seleccione la brújula de la izquierda y la de la derecha.

Las brújulas de los laterales están configuradas para repetirse a lo largo de la animación de la línea de tiempo y avanzar al siguiente fotograma cada vez que la página se desplaza hacia abajo hasta 350 píxeles.

  1. Anule la selección de las dos brújulas externas. Seleccione la brújula central y compruebe nuevamente en la ficha Adobe Edge Animate que el campo Cambiar fotogramas cada está configurado a 400 píxeles. Esta configuración hace que la animación central se desplace más despacio que las dos brújulas externas.
Seleccionar la brújula central y seleccionar la configuración de los efectos de desplazamiento.
Seleccionar la brújula central y seleccionar la configuración de los efectos de desplazamiento.

Puede crear interesantes efectos de animación en Adobe Edge Animate variando la velocidad de varias animaciones en relación con la velocidad de desplazamiento de la página. Por ejemplo, puede crear un banco de peces, un cielo gris con nubes desplazándose u otros efectos añadiendo varias repeticiones del mismo archivo OAM con diferentes configuraciones de efectos de desplazamiento.

Efecto de proyección de diapositivas

Puede controlar cómo se visualiza el conjunto de imágenes en un widget de proyección de diapositivas en función del desplazamiento de la página. Esto implica añadir un widget de proyección de diapositivas a una página para, a continuación, utilizar la ficha Proyección de diapositivas en el panel Efectos de desplazamiento con objeto de actualizar las opciones de proyecciones de diapositivas.

En este ejemplo la proyección de diapositivas se llena con una serie de imágenes que conforman la vista giratoria de 360 grados de una mochila. Puede crear imágenes de proyección de diapositivas similares instalando la cámara sobre un trípode y realizando fotografías de un objeto colocado sobre un soporte giratorio. Este efecto resulta útil para mostrar una descripción de producto interactiva y ayudar a clientes potenciales a ver un artículo desde todos los ángulos antes de su adquisición.

Siga estos pasos para crear un efecto similar utilizando un widget de proyección de diapositivas:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página se ha configurado a 7465 píxeles.
  2. Se ha configurado un marco de texto con la palabra Superpack para utilizar efectos de desplazamiento. En la ficha Movimiento, establezca la configuración de Movimiento inicial para desplazar el texto de izquierda a derecha, a la misma velocidad que lo hace la página. En la configuración de Movimiento final, ambas direcciones se establecen a 0, de modo que el marco de texto se mantiene en su lugar, como si estuviera fijado a la página.
     
Active la casilla de verificación de Movimiento y configure los efectos de desplazamiento para mover el marco de texto hacia la derecha.
Active la casilla de verificación de Movimiento y configure los efectos de desplazamiento para mover el marco de texto hacia la derecha.

  1. Abra la biblioteca de widgets y arrastre un widget de proyección de diapositivas hasta el centro de la página, a la derecha del destino final del marco de texto.
  2. Use la opción Añadir imágenes del menú Opciones para llenar la proyección de diapositivas con archivos de imagen. 

Con la proyección de diapositivas seleccionada, marque el widget de proyección de diapositivas y utilice la interfaz de fijación en el panel Control para fijar la proyección de diapositivas en su lugar. También puede experimentar añadiendo un widget de proyección de diapositivas en pantalla completa y controlándolo con efectos de desplazamiento. 

  1. Con la proyección de diapositivas seleccionada, abra la ficha Proyección de diapositivas en el panel Efectos de desplazamiento y active la casilla de verificación de Proyección de diapositivas.
  2. Arrastre el control en forma de T o introduzca un valor en el campo para configurar la posición clave. En este ejemplo, la posición clave se ha configurado a 1066 píxeles.
  3. Active el botón Cambiar diapositivas cada y configure el campo situado bajo este a 50 píxeles.
Configure la proyección de diapositivas para avanzar a la siguiente imagen cada vez que la página se desplace hacia abajo otros 50 píxeles.
Configure la proyección de diapositivas para avanzar a la siguiente imagen cada vez que la página se desplace hacia abajo otros 50 píxeles.

  1. Pruebe la página en Vista previa o en un navegador. Desplácese por la página para ver cómo parece que gira la mochila. También puede crear imágenes que parecen volar hacia arriba o hacia abajo, llenando la proyección de diapositivas con una serie de archivos de imagen ligeramente diferentes, similares a los fotogramas en un GIF animado.
  2. Después de probar los efectos de desplazamiento, regrese a la vista Diseño de Muse para continuar editando las páginas.

Efecto enrollado

Utilizando efectos de desplazamiento, puede crear una página larga dividida en varias secciones con un diseño radicalmente distinto. A medida que el usuario se desplaza por una página, las secciones parecen enrollarse con efectos de texto animados y bordes separadores creados mediante un efecto de sombra.

Puede utilizar etiquetas de anclaje o simplemente añadir una nota para animar a los visitantes a desplazarse hacia abajo por la página para ver cada una de las secciones. Cuando llegue al final del sitio de muestra y haga clic de nuevo en el botón Ir al principio, verá cómo la página sube a medida que la etiqueta de anclaje regresa al principio del diseño de la página.

Siga estos pasos para crear un efecto de enrollado similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página se ha configurado a 16 990 píxeles.
  2. En el menú Relleno del navegador, configure el color de relleno del navegador como azul uniforme.
Configure el color de relleno del navegador en el menú Relleno del navegador.
Configure el color de relleno del navegador en el menú Relleno del navegador.

  1. Con la página completa seleccionada, use el menú Relleno para configurar el color de la página como ninguno, de forma que se muestre el color de relleno del navegador azul.
  2. Desplácese por la página aproximadamente 2248 píxeles desde la parte superior. Utilice la herramienta Rectángulo para dibujar un rectángulo de 3000 píxeles de anchura por 2000 píxeles de altura. Use la herramienta Selección para centrar el rectángulo en la página, con ambos lados sobrepasando los laterales de la ventana del navegador.
  3. Con el rectángulo seleccionado, use el menú Relleno para establecer un color de relleno verde uniforme. Use el menú Efectos para configurar un efecto de sombra.
Añada un efecto de sombra al rectángulo para crear un borde más intenso.
Añada un efecto de sombra al rectángulo para crear un borde más intenso.

  1. Con el rectángulo verde seleccionado, active la casilla de verificación de Movimiento en la ficha Movimiento del panel Efectos de desplazamiento. Haga clic en el control con forma de T y arrástrelo para colocarlo en la posición clave que se encuentra en el borde superior del rectángulo, configurado a 2248 píxeles en el sitio de muestra.
  1. En la sección Movimiento inicial, configure el rectángulo para que se mueva hacia abajo a 1,5 veces la velocidad de desplazamiento. Configure el resto de direcciones a 0.
  2. Utilice la herramienta Texto para crear un campo de texto cerca de la parte superior del rectángulo verde. En este ejemplo, en el campo de texto se puede leer: This is the roll-up (Este es el efecto enrollado). No obstante, puede introducir contenido de texto y aplicar el formato de texto que prefiera.
  3. Con el marco de texto seleccionado, active la ficha Movimiento del panel Efectos de desplazamiento. Arrastre el control con forma de T para alinearlo con el borde superior del rectángulo verde y actualice la configuración para controlar cómo se visualizará el marco de texto en función del desplazamiento de la página.
Alinee el control con forma de T con el borde superior del rectángulo verde.
Alinee el control con forma de T con el borde superior del rectángulo verde.

  1. Configure la dirección hacia abajo del Movimiento inicial a 1,5 veces la velocidad de desplazamiento. Configure el resto de valores en el panel a 0. Esto provoca que el campo de texto se desplace hacia abajo, en la misma dirección y a la misma velocidad que el rectángulo verde. Tanto el rectángulo como el marco de texto permanecen en su lugar una vez que la página se desplaza más allá de la posición clave.
  2. Si hace clic en Vista previa, puede desplazarse hacia abajo para comprobar cómo el rectángulo verde y el campo de texto se desenrollan desde la parte superior y se vuelven visibles. Haga clic en Diseño cuando termine la prueba para continuar editando la página.
  3. Utilice el menú Vista para reducir el diseño del sitio al 10%. Seleccione el rectángulo verde y el campo de texto. Mantenga pulsada la tecla Opción/Alt mientras arrastra los dos elementos hacia abajo en la página para duplicarlos. Configure el color de relleno del rectángulo duplicado en azul oscuro y utilice la herramienta Texto para actualizar el contenido de texto.
Actualice el color de relleno del fondo del rectángulo duplicado y cambie el contenido del marco de texto para la nueva sección de la página.
Actualice el color de relleno del fondo del rectángulo duplicado y cambie el contenido del marco de texto para la nueva sección de la página.

En este ejemplo el marco de texto duplicado contiene el texto: Use it to drastically alter the appearance of your website (Utilícelo para alterar drásticamente el diseño del sitio web). No obstante, puede introducir cualquier texto para identificar la sección azul oscuro de la página.

  1. Con la herramienta Selección, sitúe el rectángulo duplicado y el marco de texto hacia abajo, aproximadamente a 5448 píxeles de la parte superior de la página.
  2. Con el rectángulo azul oscuro seleccionado, active la ficha Movimiento del panel Efectos de desplazamiento. La posición clave se ha actualizado automáticamente con la nueva ubicación del rectángulo (5448 píxeles) y la dirección hacia abajo de la sección Movimiento inicial sigue configurada para moverse a 1,5 veces la velocidad de desplazamiento (todos los demás valores están configurados a 0). Si activa el marco de texto duplicado, verá que también se mantienen los efectos de desplazamiento para el elemento duplicado.
  3. Repita los pasos 12 y 13 cuatro veces más, para crear un total de seis rectángulos diferentes de gran tamaño con marcos de texto sobre ellos. Cada rectángulo tiene ya aplicados el efecto de sombra y la configuración de efectos de desplazamiento. Coloque los últimos cuatro rectángulos en las siguientes posiciones clave: 8648 píxeles, 11 852 píxeles, 15 058 píxeles y 18 251 píxeles, de forma que cada sección esté separada por aproximadamente 1200 píxeles.
  4. Utilice el menú Relleno para configurar el color de relleno de los rectángulos y aplicar distintos colores. Experimente aplicando rellenos de color uniforme y de degradado para resaltar cada sección de la página y diferenciarla de las demás.
  5. Use la herramienta Texto para actualizar el contenido de texto de cada sección. Por ejemplo, podría cambiar cada uno de ellos para reflejar el color de fondo del rectángulo de debajo, de esta manera: Esta es la sección azul.
  6. Pruebe la página seleccionando Archivo > Vista previa de página en el navegador. Desplácese por la página para ver cómo van apareciendo las distintas secciones de la página y sustituyéndose con las siguientes secciones.
  7. Cierre el navegador y regrese al espacio de trabajo de Muse.

Texto dinámico

Puede crear diseños tipográficos inusuales usando una combinación de efectos de desplazamiento de movimiento y fuentes web de Adobe Edge. Las fuentes web permiten diseñar texto con una amplia gama de fuentes que se cargan junto con la página. En lugar de colocar y animar imágenes de texto creadas en un programa de edición de imágenes, puede crear páginas con un diseño sorprendente y más sencillas de actualizar mediante fuentes web de Adobe Edge. Los efectos de desplazamiento aportan dinamismo a la animación mientras la página se desplaza hacia abajo.

Siga estos pasos para crear un efecto similar con texto dinámico:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página está configurada a 4854 píxeles.
  2. Configure el color de relleno para la página como ninguno. El color de relleno del navegador es indiferente, ya que la página se cubrirá con un rectángulo largo en el paso siguiente.
  3. Utilice la herramienta Rectángulo para dibujar un rectángulo de gran tamaño, con 1159 píxeles de anchura por 4854 píxeles de altura. Utilice el menú Relleno para rellenar el rectángulo con un color de relleno uniforme o de degradado. En este ejemplo se ha aplicado como relleno un color de degradado de verde azulado a fucsia. Utilice la herramienta Selección para centrar el rectángulo de modo que ocupe toda el área del navegador. Si lo desea, puede reducir la vista para garantizar que el rectángulo se encuentra centrado en la página.
Reduzca la vista y coloque el rectángulo en el centro de la página larga.
Reduzca la vista y coloque el rectángulo en el centro de la página larga.

  1. Una vez centrado el rectángulo, configure la ampliación en el menú Vista de nuevo al 100 %.
  2. En el lado izquierdo de la página, use la herramienta Texto para crear una serie de marcos de texto. En este ejemplo hay un total de cinco marcos de texto. El contenido de cada marco de texto se encuentra en la siguiente lista, pero no dude en introducir el texto que desee en cada marco de texto:
    • Five frames (Cinco fotogramas)
    • Scrolling (desplazándose)
    • At Different Speeds Will (a velocidades diferentes)
    • Create (crearán)
    • Tensión dinámica

Como paso adicional opcional, puede duplicar determinados marcos de texto para aplicar estilos ligeramente diferentes. En este ejemplo se ha duplicado el marco de texto con la palabra Create (Crear) y se han dispuesto en capas las dos repeticiones una sobre otra para crear un efecto de sombra paralela azul claro.

  1. Use la herramienta Texto para seleccionar todos los marcos de texto. Use el panel Texto (o las opciones de formato de texto en el panel Control) para aplicar diferentes fuentes web, tamaños de fuente, colores y otros ajustes tipográficos para resaltar cada marco de texto.
  2. Seleccione todos los marcos de texto. Mientras están seleccionados, active la ficha Movimiento del panel Efectos de desplazamiento. Introduzca el mismo valor numérico para configurar la posición clave de todos los marcos de texto seleccionados a la vez. (En este ejemplo, la posición clave se ha configurado a 1372 píxeles). Configure asimismo la dirección horizontal para las secciones Movimiento inicial y Movimiento final hacia la derecha. Configure todas las direcciones verticales de las secciones Movimiento inicial y Movimiento final a 0 para que los marcos de texto no se muevan verticalmente.
  3. Haga clic lejos de los marcos de texto y, a continuación, haga clic en cada marco de texto individualmente. Introduzca valores ligeramente distintos para cada uno de los marcos de texto. En la lista siguiente, el primer valor se corresponde con la velocidad de Movimiento inicial y el segundo con la velocidad de Movimiento final para la dirección horizontal (derecha):
    • Cinco marcos: 0,9x, 0,1x
    • desplazándose: 0,12x, 0,5x
    • a velocidades diferentes: 0,7x, 0,17x
    • crearán: 1,1x, 0,005x
    • tensión dinámica.: 1x, 0,01x

Nota:

si decide duplicar un marco de texto para crear un efecto de sombra paralela, puede agrupar dos o más iteraciones de un marco de texto y controlarlas como un solo grupo al aplicar efectos de desplazamiento.

  1. Utilice la herramienta Texto para crear un campo de texto y escriba el número 5 en la parte derecha de la página. Una vez más puede elegir duplicar el marco de texto y aplicar distintos colores y formato de texto para crear la ilusión de bordes biselados y sombras paralelas. Si crea duplicados de marcos de texto con fines de diseño, agrupe los marcos de texto para poder aplicar efectos de desplazamiento al grupo.
  2. Con el campo de texto con el número 5 seleccionado, active la casilla de verificación de Movimiento en la ficha Movimiento del panel Efectos de desplazamiento. Configure la posición clave numéricamente o arrastrando el control con forma de T (en este ejemplo, configurada a 1425 píxeles). En la sección Movimiento inicial, configure el elemento para que se desplace hacia la izquierda a 1 vez la velocidad de desplazamiento. En la sección Movimiento final, configure el elemento para que se desplace hacia la izquierda a 0,01x la velocidad de desplazamiento.
  3. Pruebe la página seleccionando Archivo > Vista previa de página en el navegador. Desplácese por la página para ver cómo avanzan los cinco fotogramas de texto desde la izquierda a la vez que el marco de texto con el número 5 avanza desde la derecha. Desplácese hacia arriba y hacia abajo para ver la animación de los marcos de texto.
  4. Cierre el navegador y regrese al espacio de trabajo de Muse.
     

Menú apilado

Puede crear efectos de desplazamiento interactivos para que los diferentes botones vuelen por el área visible de la página y se alineen creando una barra de menús. En este ejemplo los cuatro botones de rollover ascienden desde el fondo de la página a medida que esta se desplaza y permanecen en su sitio para mostrar una barra de menús vertical.

Cuando los cuatro botones están alineados, el contenido del fondo (en forma de gráfico de bombilla, área de fondo de color, marco de texto y bandas diagonales en las esquinas) entra desde ambos lados de la página para crear una sección del sitio.

Aunque los botones no están vinculados en este ejemplo, si lo desea, puede añadir vínculos utilizando el menú desplegable Hipervínculo para que los visitantes puedan hacer clic sobre ellos, cargar una nueva página o utilizar etiquetas de anclaje para saltar a otra ubicación de la página actual.

Siga estos pasos para crear un menú apilado de efecto similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el sitio de muestra, la altura mínima de la página está configurada a 7465 píxeles.
  2. Configure el color de relleno de página como ninguno y configure el relleno del navegador con un color de relleno uniforme. En el sitio de muestra, el relleno del navegador está configurado con un color castaño claro.
  3. Utilice la herramienta Texto para crear un nuevo marco de texto. Introduzca la palabra Home (Inicio). Use las opciones de formato en el panel de control para añadir un color de fondo al marco de texto. También debe actualizar las opciones de formato para diseñar el texto como desee. Use los controles situados a los lados del botón para ampliar la anchura y altura a aproximadamente 300 píxeles de anchura por 115 píxeles de altura.
Utilice las opciones del panel de control para diseñar el marco de texto.
Utilice las opciones del panel de control para diseñar el marco de texto.

  1. Abra el panel Estados. Seleccione el estado Rollover y añada otro color de relleno (o modifíquelo como desee) para crear un botón de rollover.
Seleccione el estado Rollover y modifique el botón para que presente un diseño diferente al de estado Normal.
Seleccione el estado Rollover y modifique el botón para que presente un diseño diferente al de estado Normal.

  1. Después de actualizar el estado Rollover, seleccione de nuevo el estado Normal.
  2. Abra la ficha Movimiento en el panel Efectos de desplazamiento. Con el botón seleccionado, active la casilla de verificación de Movimiento. Configure la posición clave arrastrando el control con forma de T o introduciendo un valor numérico. Configure también la sección Movimiento inicial para que ascienda a 0,75 veces la velocidad de desplazamiento. Configure el resto de campos a 0.
Habilite los efectos de desplazamiento en la ficha Movimiento y, a continuación, establezca la dirección y la velocidad de movimiento.
Habilite los efectos de desplazamiento en la ficha Movimiento y, a continuación, establezca la dirección y la velocidad de movimiento.

  1. Mantenga pulsada la tecla Opción/Alt mientras arrastra el botón de inicio hacia abajo por la página. De este modo se crea un duplicado del botón. Asegúrese de que el duplicado se alinea verticalmente con el botón de inicio original. Cuando los dos elementos están alineados y el botón duplicado seleccionado, se muestra temporalmente una guía inteligente azul oscuro en el centro.
Mantenga pulsada la tecla Opción/Alt y arrastre una copia duplicada del botón para alinearlo verticalmente.
Mantenga pulsada la tecla Opción/Alt y arrastre una copia duplicada del botón para alinearlo verticalmente.

  1. Desplace el botón Duplicar hacia abajo por la página, unos 460 píxeles por debajo del botón original.
  2. Repita los pasos 7 y 8 para duplicar el botón dos veces más, a fin de crear un total de cuatro botones y distribuirlos uniformemente por la página. Utilice la herramienta Texto para editar el segundo, el tercer y el cuarto botón desde la parte superior, y actualizar el contenido mediante estas etiquetas: Productos, Fotografías, Contacto.
Edite el texto de los marcos de texto para que cada etiqueta de botón sea única.
Edite el texto de los marcos de texto para que cada etiqueta de botón sea única.

Cuando duplicó el primer botón de inicio, copió el estilo del marco de texto y su contenido, así como la configuración de los efectos de desplazamiento. Si selecciona uno de los botones duplicados y busca en el panel Efectos de desplazamiento, verá que la configuración de la ficha Movimiento coincide con la configuración aplicada al botón de inicio y que la posición clave para cada botón es de 460 píxeles por debajo del botón anterior (la misma distancia que el espacio entre cada botón de la página).

  1. Calcule la altura total de los cuatro botones cuando están alineados en sus ubicaciones finales sumando la altura y el espaciado. En el sitio de muestra, los botones se encuentran cada uno a 116 píxeles de altura y hay 4 píxeles de espacio entre cada botón. Esto implica que la altura total de la barra de menús vertical (una vez integrada) es de 476 píxeles. Utilice la herramienta Rectángulo para dibujar un rectángulo con la anchura de la sección de la página deseada y la misma altura que la barra de menús. En este ejemplo, el rectángulo tiene 931 píxeles de anchura por 476 píxeles de altura.
  2. Si desea reproducir el diseño del sitio de muestra, configure el color de relleno del rectángulo en rosa pálido, en un tono más claro que el estado Normal de los botones. También puede crear esquinas redondeadas si lo desea introduciendo un valor de radio de vértice en el panel de control. En este ejemplo, las cuatro esquinas se han configurado a 10 píxeles.
Seleccione el rectángulo y configure el radio de vértice de las cuatro esquinas redondeadas.
Seleccione el rectángulo y configure el radio de vértice de las cuatro esquinas redondeadas.

  1. Utilice la herramienta Selección para alinear el rectángulo de modo que el borde superior se encuentre aproximadamente a 5094 píxeles de la parte superior de la página. Asegúrese de que el lado izquierdo del rectángulo esté verticalmente alineado a la izquierda de los botones. En el sitio de muestra, el rectángulo y los botones se encuentran a una distancia de 14 píxeles del lado izquierdo de la página. Puede acceder a esta configuración seleccionando un elemento y abriendo el panel Transformar. El valor X es la distancia desde el lado izquierdo (14 píxeles) y el valor Y es la distancia desde la parte superior de la página (5094 píxeles).
  2. Con el rectángulo seleccionado, abra el panel Efectos de desplazamiento y active la casilla de verificación de Movimiento en la ficha Movimiento. Configure la posición clave a 4979.
  3. Configure el Movimiento inicial para desplazarse hacia la derecha a una vez la velocidad de desplazamiento. Configure el resto de campos en la ficha Movimiento a 0.
Aplique efectos de desplazamiento para hacer que el rectángulo aparezca en la página por el lado izquierdo y se desplace hasta su lugar a la derecha.
Aplique efectos de desplazamiento para hacer que el rectángulo aparezca en la página por el lado izquierdo y se desplace hasta su lugar a la derecha.

  1. Para garantizar que el rectángulo se encuentra tras los cuatro botones, elija Objeto > Enviar detrás con el rectángulo seleccionado.
  2. Elija Archivo > Colocar y Examinar para seleccionar un archivo de imagen; y haga clic una vez en la página para colocarla. En este ejemplo se ha colocado un archivo PNG con transparencia para mostrar la imagen de una bombilla. La bombilla está colocada en la parte superior del rectángulo de gran tamaño, a la derecha y fuera del área que cubrirán los botones de menú. En este ejemplo la imagen se ha colocado a una distancia de 501 píxeles desde la izquierda (posición X) y de 5245 píxeles desde la parte superior de la página (posición Y).
  3. Para garantizar que la imagen se coloca detrás de los cuatro botones, elija Objeto > Enviar detrás con la imagen seleccionada. El objetivo es mostrar la imagen sobre el rectángulo grande pero manteniéndola detrás de los cuatro botones.
  4. Con la imagen seleccionada, abra la ficha Movimiento del panel Efectos de desplazamiento y active la casilla de verificación de Movimiento. Configure la posición clave en el valor deseado. En el sitio de muestra se ha configurado a 4979 píxeles.
  5. En la sección Movimiento inicial, configure el valor correcto para que se traslade a 0,75 veces la velocidad de desplazamiento. Configure el resto de valores de dirección a 0.
Configure el Movimiento inicial para desplazarse hacia la derecha a la misma velocidad que el rectángulo.
Configure el Movimiento inicial para desplazarse hacia la derecha a la misma velocidad que el rectángulo.

  1. Utilice la herramienta Texto para crear un marco de texto. En el archivo de ejemplo, el marco de texto tiene el siguiente contenido: Stack linked text frames with high contrast roll-overs to create unusual menus (Marcos de texto vinculados y apilados con rollovers de alto contraste para crear menús originales).  No obstante, puede introducir cualquier contenido de texto que desee. Utilice las opciones de formato del panel Control para diseñar el texto como desee. En este ejemplo, el marco de texto no tiene aplicado un color de relleno de fondo.
  2. Use la herramienta Selección para situar el marco de texto a la derecha de la imagen ya colocada. En este ejemplo, el marco de texto está configurado a un valor X de 357 píxeles (desde la izquierda) y un valor Y de 5136 píxeles (desde la parte superior). La ubicación real depende del contenido de texto y las opciones de formato que aplique al marco de texto.
  3. Con el marco de texto seleccionado, use la opción Objeto > Enviar detrás para colocarlo o moverlo en el panel Capas, de forma que se muestre el marco de texto detrás de los cuatro botones, pero delante del rectángulo grande.
  4. Active la casilla de verificación Movimiento en el panel Efectos de desplazamiento. Configure la posición clave arrastrando el control en forma de T o introduciendo un valor. En el sitio de muestra la posición clave se ha configurado a 4979 píxeles, el mismo valor de posición clave utilizado en la imagen ya colocada (gráfico de bombilla).
  5. En la sección Movimiento inicial, configure el marco de texto para desplazarse hacia la izquierda a 0,5 veces (la mitad) de velocidad de desplazamiento. Configure el resto de campos a 0.
El marco de texto está configurado para desplazarse hacia la izquierda (en la dirección opuesta al rectángulo y la imagen ya colocada) a una velocidad más lenta.
El marco de texto está configurado para desplazarse hacia la izquierda a una velocidad más lenta.

La sección del menú apilado básico ya está completada. No obstante, hay otro elemento de diseño que puede añadir. Implica añadir varios rectángulos rotados sobre la esquina inferior derecha del rectángulo de gran tamaño, del mismo modo que en el ejemplo del Menú de escala desigual se utilizaron rectángulos rotados para añadir un efecto de barras diagonales.

  1. Utilice la herramienta Rectángulo para dibujar varios rectángulos de anchuras diferentes. Rellene los rectángulos con el mismo color de fondo aplicado al relleno del navegador. De esta forma, los rectángulos no se volverán visibles hasta que el rectángulo grande se desplace hacia la derecha hasta su lugar, tras ellos. Si lo desea, puede agrupar el conjunto de rectángulos con diagonales para trabajar con ellos como un solo elemento.
Rote una serie de rectángulos de manera que creen barras diagonales en la esquina inferior derecha del rectángulo de mayor tamaño.
Rote una serie de rectángulos de manera que creen barras diagonales en la esquina inferior derecha del rectángulo de mayor tamaño.

  1. Si fuera necesario, use el panel Capas o elija Objeto > Enviar detrás para colocar el rectángulo de mayor tamaño en el fondo, tras el resto de elementos de la página.
  2. Asegúrese de comprobar su progreso periódicamente haciendo clic en Vista previa o previsualizando la página en un navegador y desplazándose por ella para ver como el menú apilado se desplaza hasta su lugar. Vuelva a Muse cuando haya finalizado la prueba. 

Fondo en movimiento

Para conseguir un efecto de fondo en movimiento, cree una serie de rectángulos de gran tamaño rellenos con imágenes de fondo en mosaico que cubran la longitud de una página larga. Este ejemplo utiliza la ficha Desplazamiento en el menú Relleno (en lugar de la ficha Movimiento en el Panel de efectos de desplazamiento) para aplicar la configuración de movimiento.

Siga estos pasos para crear un efecto de fondo en movimiento similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página está configurada a 6254 píxeles.

Nota:

en este ejemplo no importa si configura un color de relleno del navegador, ya que la página está cubierta con rectángulos. Configure el color de relleno de página como ninguno.

  1. En la parte superior de la página, use la herramienta Rectángulo para dibujar un rectángulo grande. En el sitio de muestra, el rectángulo tiene una anchura de 1159 píxeles y una altura de 1312 píxeles. Use la herramienta Selección para centrar el rectángulo en la página, con ambos lados sobrepasando los laterales de la ventana del navegador.
  2. Con el rectángulo seleccionado, utilice el menú Relleno para configurar una imagen de fondo. Configure el menú Encaje como mosaico para crear una imagen en mosaico.
Configure una imagen de fondo en mosaico como relleno del rectángulo.
Configure una imagen de fondo en mosaico como relleno del rectángulo.

  1. Si lo desea, puede utilizar el menú Efectos para configurar un efecto de sombra y crear un borde intenso alrededor del rectángulo.
  2. Con el rectángulo con relleno seleccionado, abra la ficha Desplazamiento en el menú Relleno. Active la casilla de verificación de Movimiento y haga clic en el control con forma de T para arrastrarlo; o introduzca un número en el campo para configurar la posición clave. En el sitio de muestra, la posición clave se ha configurado a 512 píxeles. No obstante, si lo desea, puede soltar el control para alinearlo con el borde superior del rectángulo.
  3. En la sección Movimiento inicial, configure la dirección para que se desplace hacia abajo y hacia la izquierda; y configure ambas velocidades para desplazarse a 0,2 veces la velocidad de desplazamiento. Repita la misma configuración en la sección Movimiento final. 
Configure las opciones de Movimiento en la ficha Desplazamiento del menú Relleno.
Configure las opciones de Movimiento en la ficha Desplazamiento del menú Relleno.

  1. Repita los pasos 2 a 6 para crear otro rectángulo con relleno. Coloque el nuevo rectángulo justo debajo del primero que creó, de forma que no se muestre ninguna de las zonas de relleno del navegador y que no quede ningún espacio entre los dos rectángulos. Rellene el nuevo rectángulo con un relleno de fondo de imagen en mosaico diferente.
  2. Repita el paso 7 para crear un tercer rectángulo grande que se situará justo debajo del segundo rectángulo. Utilice el menú Relleno para configurar una imagen de fondo en mosaico diferente. Es posible que le resulte útil reducir la vista en el menú Ver para alinear todos los rectángulos verticalmente en la página.
Reduzca la vista y utilice la herramienta Selección para colocar los tres rectángulos grandes verticalmente.
Reduzca la vista y utilice la herramienta Selección para colocar los tres rectángulos grandes verticalmente.

Nota:

en el sitio de muestra, el tercer rectángulo es mayor que los dos primeros. Puede arrastrar los controles para expandir la altura del tercer rectángulo duplicado o para crear un cuarto rectángulo con el que rellenar el área restante en el fondo de la página.  

  1. Con el segundo rectángulo seleccionado, abra la ficha Desplazamiento en el menú Relleno. Actualice la sección Movimiento inicial para desplazar el rectángulo hacia la derecha a 0,3 veces la velocidad de desplazamiento. En la sección Movimiento final, aplique la misma configuración para desplazar el rectángulo hacia la derecha a 0,3 veces la velocidad de desplazamiento. Configure ambos campos de dirección vertical a 0.
Configure el Movimiento inicial y el Movimiento final para desplazar el segundo rectángulo hacia la derecha.
Configure el Movimiento inicial y el Movimiento final para desplazar el segundo rectángulo hacia la derecha.

  1. Seleccione el tercer rectángulo y actualice la configuración en la ficha Desplazamiento del menú Relleno. Configure la sección Movimiento inicial para ascender a 0,25 veces la velocidad de desplazamiento y trasladarse hacia la izquierda a 0,6 veces la velocidad de desplazamiento. Aplique la misma configuración en la sección Movimiento final para el tercer rectángulo.
  2. Pruebe la página seleccionando Archivo > Vista previa de página en el navegador. Desplácese por la página para ver cómo cada uno de los rectángulos en mosaico parece moverse en diagonal hasta llegar al final. A medida que asciende por la página, los rectángulos continúan moviéndose.
  3. Cierre el navegador y regrese al espacio de trabajo de Muse.

Máscaras

En este ejemplo, un gráfico de barras se coloca en su lugar mediante una animación. El gráfico de la flecha rosa se extiende hacia arriba, entretejiéndose por delante y por detrás de las barras del gráfico. Aunque las barras del gráfico parecen crecer desde la base, se trata en realidad de rectángulos de color uniforme con efectos de desplazamiento de movimiento aplicados, que aparecen desde detrás de rectángulos en blanco de mayor tamaño (rellenados con el mismo color blanco uniforme del fondo de la página).

Además de efectos de desplazamiento, este ejemplo utiliza varias técnicas. Los elementos se colocan unos delante o detrás de otros mediante el panel Capas. Los rectángulos blancos se dibujan sobre los elementos del gráfico. Cuando los rectángulos blancos cubren las barras del gráfico, las barras y la flecha se ocultan, como si estuvieran enmascaradas. Los rectángulos blancos y la tabla del gráfico utilizan la configuración 0 de los efectos de desplazamiento de movimiento para permanecer en su lugar a medida que la página se desplaza. Las barras y el gráfico de flecha rosa que se disponen en capas a continuación, tienen aplicados efectos de desplazamiento de movimiento que provocan que se desplacen hacia arriba y se vuelvan visibles a medida que van integrando el gráfico de barras.

Siga estos pasos para crear un efecto de máscara similar:

  1. En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el ejemplo del sitio, la altura mínima de la página está configurada a 6076 píxeles.
  2. Configure la página y el relleno del navegador con color de relleno blanco (o el color que prefiera, pero utilice este mismo color para rellenar posteriormente los rectángulos de máscara).
  3. Utilice la herramienta Rectángulo para dibujar un rectángulo de gran tamaño en la página. El rectángulo en el sitio de muestra tiene una anchura de 804 píxeles y una altura de 489 píxeles.
  4. Configure el color de relleno como ninguno. Seleccione el color de trazo que desee. En el menú Trazo, configure los lados izquierdo e inferior del rectángulo para mostrar un trazo con un grosor de 20, y los lados superior y derecho un grosor de 0 para ocultar el trazo. Así se crea la base de la gráfica de barras.
     
Use el menú Trazo para configurar un trazo en los lados izquierdo e inferior del rectángulo.
Use el menú Trazo para configurar un trazo en los lados izquierdo e inferior del rectángulo.

  1. Con el marco de texto seleccionado, abra la ficha Movimiento del panel Efectos de desplazamiento. Configure la posición clave e introduzca 0 en los cuatro campos. Esta configuración significa que el rectángulo no se desplazará ni antes ni después de alcanzar la posición clave, de forma que el elemento permanecerá en su lugar.
Introduzca 0 en todos los campos para "fijar" el rectángulo en la página.
Introduzca 0 en todos los campos para "fijar" el rectángulo en la página.

  1. Utilice la herramienta Rectángulo para dibujar dos rectángulos más grandes. Dibuje el primer rectángulo y alinéelo a la izquierda de la gráfica. En el sitio de muestra, el rectángulo tiene una anchura de 657 píxeles por una altura de 1810 píxeles.
  2. Dibuje el segundo rectángulo debajo del gráfico, alineándolo con el borde inferior. En el sitio de muestra, el rectángulo tiene una anchura de 1002 píxeles y una altura de 1541 píxeles.
  3. Configure el color de relleno de ambos rectángulos como blanco (o con el mismo color de relleno del navegador) y el trazo a 0. Utilice la herramienta Selección para alinear los rectángulos con los dos lados del gráfico.
Coloque los dos rectángulos más grandes a la izquierda y debajo del gráfico.
Coloque los dos rectángulos más grandes a la izquierda y debajo del gráfico.

  1. Con los rectángulos seleccionados, haga clic con el botón derecho y seleccione Objeto > Agrupar para agrupar los dos rectángulos de máscara juntos.
  2. Con el grupo de rectángulos seleccionado, abra la ficha Movimiento del panel Efectos de desplazamiento. Configure la posición clave (en el ejemplo a 1516 píxeles) e introduzca 0 en los cuatro campos. Esta configuración significa que el grupo de rectángulos blancos no se desplazará ni antes ni después de alcanzar la posición clave. El grupo permanecerá en su lugar, al igual que la tabla externa del gráfico.
  3. Utilice el panel Capas para ocultar y bloquear temporalmente el grupo.
  4. Desplácese hasta el espacio situado bajo el grupo y utilice la herramienta Rectángulo para dibujar un total de cinco rectángulos con la misma anchura. En el sitio de muestra, todas las barras tienen una anchura de 74 píxeles y diferentes alturas. De izquierda a derecha, la altura de los cinco rectángulos del ejemplo es de 141, 188, 292, 444 y 583 píxeles, respectivamente. Todos los rectángulos tienen el mismo color verde de relleno que el trazo que define los bordes izquierdo e inferior del gráfico.
Escalone los cinco rectángulos en la página.
Escalone los cinco rectángulos en la página.

  1. La ubicación de los rectángulos (de izquierda a derecha) se indica a continuación mediante sus valores X e Y:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. A continuación, seleccione cada uno de los rectángulos, empezando por el rectángulo de la izquierda y siguiendo hacia la derecha. Seleccione cada uno de ellos, active la casilla de verificación Movimiento en la ficha Movimiento del panel Efectos de desplazamiento y configure las siguientes posiciones clave:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Con todos los rectángulos seleccionados, actualice la configuración en el panel Efectos de desplazamiento, de modo que la sección Movimiento inicial ascienda a 1 vez la velocidad de desplazamiento. Configure el resto de campos a 0.
     
Configure los valores de movimiento de los cinco rectángulos a la vez en el panel Efectos de desplazamiento.
Configure los valores de movimiento de los cinco rectángulos a la vez en el panel Efectos de desplazamiento.

  1. Coloque un archivo PNG con transparencia en la página. En el sitio de muestra, el archivo PNG es el gráfico de una flecha rosa que asciende en zigzag. El archivo PNG utilizado en este ejemplo tiene una anchura de 695 píxeles y una altura de 443 píxeles. Tras colocarlo en la página, desplácelo hasta la ubicación X: 78 e Y: 3427.
  2. En el panel Capas, coloque el archivo PNG por debajo del primer y el tercer rectángulo de barras (desde la izquierda) y sobre la segunda, la cuarta y la quinta barra.
Utilice el panel Capas para colocar la imagen de flecha PNG de forma que parezca tejerse entre las barras del gráfico.
Utilice el panel Capas para colocar la imagen de flecha PNG de forma que parezca tejerse entre las barras del gráfico.

  1. Con la imagen de flecha seleccionada, abra la ficha Movimiento del panel Efectos de desplazamiento y active la casilla de verificación de Movimiento. Configure la posición clave (en este ejemplo, de 3238 píxeles). En la sección Movimiento inicial, configure las direcciones hacia arriba y hacia la derecha e introduzca 0,25 veces la velocidad de desplazamiento en ambos campos de Movimiento inicial. Configure ambos campos en la sección Movimiento final a 0.
Actualice la configuración de movimiento en el panel Efectos de desplazamiento.
Actualice la configuración de movimiento en el panel Efectos de desplazamiento.

  1. En el panel Capas, muestre y desbloquee el grupo de dos rectángulos blancos que ocultó y bloqueó anteriormente. Desplace el grupo por encima del resto de elementos, de forma que se muestre sobre el resto de contenido de la página. Dado que el grupo se encuentra en la parte superior, actuará como una máscara para mostrar únicamente los gráficos de barras y de flecha cuando ascienden dentro del marco del gráfico.
  2. Pruebe la página seleccionando Archivo > Vista previa de página en el navegador. Desplace la página para ver cómo se coloca el gráfico de barras en su lugar a medida que los dos rectángulos blancos que enmascaran las barras ocultan los elementos del gráfico de barras hasta que llegan al gráfico.
  3. Cierre el navegador y regrese al espacio de trabajo de Muse.

Ejemplos de diseños del sitio utilizando efectos de desplazamiento

Eche un vistazo al sitio web de Demential Lab para ver la función de efectos de desplazamiento en acción.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea