Introducción
Uso de Sitely
Elementos
Cómo
Hay un tutorial en video disponible para este tema Haz clic aquí para verlo
En Sitely, puedes dar vida a los elementos de tu sitio web con animaciones. Hay tres tipos principales::
La animación de una sola vez crea un efecto cuando un elemento aparece por primera vez. Tienes muchos efectos para elegir, pero no los verás en el lienzo de Sitely; tendrás que previsualizar tu sitio para comprobarlos.
Cuando un elemento entra en la vista, la animación se activa. Puede comenzar cuando el elemento aparece o después de un poco más de desplazamiento. Puedes controlar qué distancia debe desplazarse el elemento antes de que empiece la animación. Si el elemento ya está en pantalla cuando se carga la página, la animación comienza de inmediato.
También puedes controlar la demora y la duración de la animación. Esto es útil si estás animando varios elementos y quieres que empiecen en momentos distintos para un efecto más fluido.
En este ejemplo, el texto se ha configurado para animarse después de posicionarse en un lugar fijo dentro del viewport del navegador. Se ha configurado para repetir la animación 5 veces antes de detenerse. Si no ves el texto animado, desplázate por la página hasta que comience, o aumenta la altura de la ventana del navegador: se ha establecido para empezar a 600 px desde la parte inferior del viewport del navegador.
Este es un ejemplo de texto animado usando el efecto Zoom, junto con la opción ‘Subir sutil’
Solo un aviso: demasiada animación a veces puede molestar a los visitantes, especialmente si parece publicidad. Así que úsala con criterio y evita excederte, sobre todo con animaciones repetitivas. Además, las animaciones en la parte superior de la página podrían confundir a la gente haciéndoles pensar que la página carga lentamente.
Las animaciones ligadas al desplazamiento le dan a tu sitio web una sensación dinámica. Puedes experimentar con distintos efectos como desplazamiento vertical y horizontal, escalado, rotación, desenfoque y cambios de opacidad.
Cada efecto tiene un rango de "viewport", que controla cuándo empieza y termina la animación al desplazarte. Por ejemplo, un elemento suele comenzar a moverse cuando entra en el viewport y se detiene cuando sale.
También puedes elegir dónde empieza la animación en el elemento: en la parte superior, en el centro o en la inferior. Esto es útil para animaciones cerca de la parte superior de la página.
Aquí tienes un desglose de algunos efectos:
En el ejemplo, hemos aplicado un efecto de opacidad a varios elementos para crear un cambio de color a medida que se desplaza la página.
Cada efecto tiene su propia configuración, como la velocidad para los efectos de desplazamiento y el grado de rotación. Puedes ponerte muy creativo combinando efectos y hacer que tu sitio web destaque de verdad.
En este ejemplo, vemos el efecto ‘Movimiento vertical’ aplicado a cuatro cajas. A medida que se desplaza la página, las cajas se mueven hacia arriba, revelando texto oculto debajo de ellas. Cada caja se desplaza una distancia ligeramente distinta porque todas se han configurado para moverse a diferentes velocidades: básicamente, cuanto mayor es la velocidad, antes llega el elemento a su destino al final de la animación.
Uno
Paso
A la
Vez
Todas las animaciones se aplican a través del panel de estilos a la derecha de la pantalla, en la sección llamada ‘Efectos de desplazamiento’. Allí verás la opción para aplicar animaciones de una sola vez. Al seleccionarla, se te presentará una serie de efectos que puedes aplicar. Simplemente elige el efecto que quieras para aplicarlo al elemento seleccionado en el lienzo. Si seleccionas la opción ‘Otros’, aparecerá una lista secundaria de animaciones, ampliando aún más tus opciones.
Cuando seleccionas una animación, aparecen otras opciones que te permiten elegir distintos tipos de movimientos, la duración, un tiempo de retraso antes de que empiece y un número de repeticiones antes de que se detenga. Una última opción te permite definir la distancia desde la parte inferior del viewport del navegador que el elemento debe alcanzar antes de que comience la animación. Está claro que, si no estableces un desplazamiento, toda la animación puede empezar y terminar antes de que alguien llegue a verla en la página.
Las animaciones de desplazamiento se aplican seleccionando la opción ‘Animar mientras se desplaza’ en la sección ‘Efectos de desplazamiento’ del panel de estilos. Allí encontrarás todos los efectos básicos de desplazamiento que se pueden aplicar a los elementos de tu lienzo. Solo selecciona un efecto y luego ajusta la configuración para lograr el resultado que quieras crear.
Ajustas la configuración haciendo clic en el ícono de ajustes a la derecha del nombre del efecto. Se ve así:
Antes de entrar en la configuración, conviene hacer una breve explicación de cómo funcionan las animaciones de desplazamiento.
Desplazarse por una página web es, básicamente, mover el contenido desde la parte inferior del viewport del navegador hacia la parte superior. Por lo tanto, cualquier animación de desplazamiento solo puede comenzar cuando el elemento animado aparece en la parte inferior del viewport, y solo puede terminar cuando alcanza la parte superior del viewport. Está claro que no siempre queremos que una animación empiece justo en la parte inferior de la ventana del navegador, ni que tengamos que esperar a que llegue a la parte superior para que se detenga. Por ello, Sitely te permite definir un viewport en el que tiene lugar la acción; para mayor claridad, nos referiremos a ese viewport como una ‘Ventana de acción’. Es, esencialmente, una parte de la ventana del navegador que designas como el área de la pantalla donde las cosas se mueven.
Sitely hace que sea muy fácil configurar esta ‘Ventana de acción’ mediante una sencilla interfaz gráfica de ajustes. Al hacer clic en el ícono de configuración de un efecto, verás una ventana emergente donde se realizan los ajustes. En el lado izquierdo de la ventana emergente hay una representación gráfica de la pantalla de un dispositivo. Dentro de esa pantalla hay dos marcadores. Puedes deslizar estos marcadores hacia arriba o hacia abajo para crear tu ‘Ventana de acción’. En este ejemplo, los marcadores se han establecido en 60% (superior) y 75% (inferior). El espacio en blanco entre ambos es nuestra ‘Ventana de acción’, donde tiene lugar el efecto. Esta fue la configuración utilizada en el ejemplo de las cajas deslizantes anterior.
A la derecha de la ventana emergente están los ajustes específicos del efecto. De nuevo, en este ejemplo de una animación de movimiento vertical, hemos establecido una velocidad de 1,5 veces la velocidad del desplazamiento y hemos indicado a la animación que empiece cuando la parte inferior del elemento animado esté dentro de la ‘Ventana de acción’. ¿El resultado? Cuando la parte inferior del elemento cruza el marcador del 75%, el elemento comenzará su movimiento vertical hacia arriba hasta alcanzar el marcador del 60%. En ese punto, deja de moverse. Esto supone que el punto de partida del recorrido del elemento es la posición en la que se colocó en el lienzo. Pero ¿y si quisiéramos que comenzara su movimiento antes y terminara en su posición del lienzo? Para ello, haríamos clic en el botón ‘Intercambiar’ para invertir el efecto. Esencialmente, el elemento comenzará por debajo de su posición actual en el lienzo y se moverá hacia arriba hasta su posición en el lienzo. El punto en el que el elemento inicia su recorrido viene determinado por el marcador de la zona inferior.
Cada efecto de animación tendrá ajustes ligeramente diferentes, pero todos siguen los mismos principios generales. Define una ‘Ventana de acción’ y luego aplica los ajustes para conseguir el efecto deseado. Por ejemplo, con animaciones horizontales, puedes establecer la dirección del movimiento. En este ejemplo, configuramos un elemento para que se mueva desde su posición en el lienzo hacia la derecha de la pantalla. La fila inferior de botones de dirección indica a la animación la posición inicial del elemento, mientras que la fila superior de botones muestra la dirección del movimiento.
Algo a tener en cuenta sobre la animación horizontal es que la ruta de viaje es ilimitada: esencialmente, el elemento se moverá hasta salir por el borde de la pantalla durante el tiempo que tarde en desplazarse a través de la ‘Ventana de acción’. Por lo tanto, cuanto más grande sea la ‘Ventana de acción’, más tardará en completarse la animación. Si quieres restringir el movimiento horizontal para que el elemento no salga completamente de la pantalla, puedes configurar ambos conjuntos de botones de dirección en ‘Lienzo’. Esto te permitirá establecer una velocidad de desplazamiento que, básicamente, limita el movimiento. El resultado es que la animación comienza cuando el elemento entra en la ‘Ventana de acción’ y se detiene cuando sale de ella. Si la velocidad de desplazamiento es lo suficientemente baja (normalmente por debajo de 1x), la animación se detendrá antes de que le dé tiempo a salirse por el borde de la pantalla. Aquí tienes un ejemplo de ese efecto. Utiliza una ‘Ventana de acción’ muy pequeña y una velocidad baja. Si se aumentara el tamaño de la ventana, el elemento seguiría moviéndose hacia la derecha hasta el borde de la pantalla hasta que el desplazamiento de la página alcanzara la parte superior de la ‘Ventana de acción’
La animación Animar al pasar el cursor está disponible en la mayoría de los elementos de la página para añadir distintos tipos de efectos que capten la atención del usuario.
Las animaciones pueden ser un gran recurso para tu sitio web si se usan con intención y de forma sensata. También hay muchas maneras de configurarlas para lograr efectos concretos: se trata de probarlo todo y entender qué está pasando. En muchos aspectos, es un poco como aprender a pilotar un helicóptero: empuja la palanca en cierta dirección y observa qué hace el helicóptero. Si quieres que haga eso de nuevo, esa es la dirección en la que va la palanca. Así que, juega con las opciones de animación y comprende cómo funciona cada una. Con un poco de práctica, te convertirás en un maestro de la animación. Puede que no alcances las alturas vertiginosas de Walt Disney, pero podrás aplicar grandes efectos a tus páginas web de Sitely.
Para empezar, hemos creado un archivo de proyecto de Sitely que contiene todas las animaciones de esta página: encontrarás el enlace abajo. Abre el archivo del proyecto y selecciona las animaciones. Luego revisa la configuración que se ha utilizado para crearlas.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
