Editor de Wix Studio: agregar una interacción preestablecida de clic o de efecto cursor
6 min de lectura
Agrega interacciones para crear una experiencia animada a medida que los visitantes hacen clic o pasan el cursor sobre los elementos. ¿Necesitas una animación rápida y fácil? Usa uno de nuestros preajustes (por ejemplo, Expandir, Mover, Fundir) y modifícalo a tu gusto.
La interacción permite animar el mismo elemento en el que los visitantes hacen clic o sobre el que pasan el cursor, o un elemento diferente de la página. De cualquier manera, tienes el control total del aspecto y de la sincronización, por lo que resulta realmente eficaz.
Paso 1 | Agrega un disparador (hacer clic o pasar el cursor)
Para comenzar, selecciona el elemento que dispara la interacción. Este es el elemento sobre el que los visitantes pasan el cursor o hacen clic antes de ver la animación. Luego, ve al panel Inspector profesional para agregar una nueva interacción.
Consejo:
Puedes agregar varias interacciones a un elemento, para que active una animación diferente al pasar el cursor o al hacer clic.
Para agregar un disparador:
- Selecciona el elemento que debe desencadenar la interacción.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Haz clic en la pestaña Animaciones y efectos
. - Selecciona Pasar el cursor o Hacer clic.
- Haz clic en + Agregar.
Paso 2 | Configura la interacción
Después de elegir un elemento y un disparador, configura la interacción. Selecciona una animación prediseñada, el elemento que debe mostrarla y qué sucede exactamente al pasar el cursor o al hacer clic.
Nota:
Las animaciones disponibles dependen del elemento que selecciones.
Para configurar la interacción:
- (En el panel Configuración) Elige lo que sucede al Pasar el cursor o al Hacer clic:
- Iniciar animación: al hacer clic o pasar el cursor sobre el elemento, se activa la animación elegida.
- Restablecer animación: al hacer clic o pasar el cursor sobre el elemento, se elimina cualquier animación que se haya aplicado previamente.
- Activar/desactivar: al hacer clic en el elemento, se activa la animación, y un segundo clic la elimina.
Nota: Esta opción solo está disponible para interacciones de clic.
- Selecciona el elemento animado:
- Hacer que el elemento active su propia animación: haz clic en el nombre del elemento (la palabra (mismo ítem) aparece junto a él).
- Animar un elemento diferente en la página: selecciona un elemento en el menú desplegable o haz clic en Elegir en lienzo para seleccionarlo en la página.
Consejo: Mantén pulsada la tecla Cmd/Ctrl para seleccionar un elemento secundario.
- Selecciona una animación:
- Haz clic en la pestaña Preajustes.
- Elige una animación de la lista.
Consejo:
Al configurar un elemento para que se muestre al hacer clic o al pasar el cursor, este aparece con una superposición de cuadros en el lienzo. Esto es para indicar que el elemento es inicialmente transparente.
Puedes desactivar esta indicación en cualquier momento. Haz clic en el icono de Wix Studio 
, pasa el cursor sobre Ver y haz clic en Elementos transparentes.
, pasa el cursor sobre Ver y haz clic en Elementos transparentes.Paso 3 | (Opcional) Ajusta la animación
Después de elegir la animación que deseas, personalízala para lograr el efecto deseado. Puedes controlar determinados ajustes, como la duración, el retraso y la aceleración, para que la animación resulte realmente eficaz.
Nota:
Los ajustes disponibles dependen de la animación preestablecida que elijas.
Para ajustar la animación:
- (En el Inspector profesional) Haz clic en Ajustar animación en la parte inferior.
- Personaliza a tu gusto los ajustes disponibles:
- Retraso: arrastra el control deslizante para agregar un retraso (en segundos) antes de que comience la animación.
- Duración: arrastra el control deslizante para establecer la duración de la animación (en segundos).
- Aceleración: en el menú desplegable, elige cómo se realiza la animación de entrada y de salida.
- Escalar: elige cuánto aumenta o disminuye el tamaño del elemento.
- Ángulo: cambia el ángulo de movimiento.
- Distancia: haz que el elemento se mueva más lejos o más cerca de su posición predeterminada en la página.
- Dirección: cambia la dirección en la que gira el elemento.
- (Opcional) Haz clic en Previsualizar para saber cómo se ve la animación y realizar más ajustes, si es necesario.
Preguntas frecuentes
Haz clic abajo para obtener más información sobre cómo crear interacciones.
¿Qué aspecto tiene un elemento cuando activa su propia animación?
¿Qué aspecto tiene una interacción entre diferentes elementos?
¿Puede un elemento activar otros varios elementos?
¿Puede un solo elemento tener varias animaciones?
¿Te ha sido útil?
|