Editor de Wix Studio: crear una interacción personalizada de clic o de efecto cursor
7 min de lectura
Agrega interacciones para crear una experiencia animada a medida que los visitantes hacen clic o pasan el cursor sobre los elementos. La interacción puede animar el mismo elemento que la activó o cualquier otro elemento de la página.
Con las interacciones personalizadas, tienes total libertad creativa para diseñar una animación desde cero. También puedes controlar la sincronización de la animación para que sea realmente efectiva.
Paso 1 | Agrega un disparador (hacer clic o pasar el cursor)
Para comenzar, selecciona el elemento que desencadena 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 a la pestaña Interacciones en el panel Inspector profesional para agregar una nueva interacción.
Consejo:
Puedes agregar múltiples interacciones a un elemento para que active diferentes animaciones al pasar el cursor o al hacer clic.
Para agregar un disparador:
- Selecciona el elemento que debe desencadenar la interacción.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor. - Haz clic en la pestaña Interacciones
. - Selecciona Pasar el cursor o Hacer clic.
- Haz clic en +Agregar.
Paso 2 | Configura la interacción
Ahora puedes elegir qué elemento se anima, el tipo de animación que debe aparecer y la acción exacta que sucede al pasar el cursor o al hacer clic (por ejemplo, aplicar la animación, activarla o desactivarla, etc.).
Para configurar la interacción:
- Selecciona una opción en el menú desplegable Pasar el cursor o Hacer clic:
- Iniciar animación: al hacer clic/pasar el cursor sobre el elemento, se activa la animación elegida.
- Activar/desactivar: de forma similar a una palanca, al hacer clic en el elemento se activa la animación y un segundo clic la elimina.
- Restablecer animación: al hacer clic/pasar el cursor sobre el elemento, se elimina cualquier animación que se haya aplicado previamente.
- Selecciona una opción del menú desplegable 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.
- Haz clic en la pestaña Personalizadas.
- Haz clic en Crear animación personalizada.
Consejo:
Las animaciones personalizadas que creas se guardan para su uso futuro en otros elementos.
Paso 3 | Personaliza la animación
Ahora es el momento de crear una animación desde cero. Agrega todo tipo de transformaciones de estilo y diseño para cambiar el tamaño del elemento (Escalar), la posición (Trasladar), el ángulo (Girar), el color de relleno y más.
También puedes diseñar el estado inicial del elemento para complementar la animación que creaste. Así es como se verá el elemento cuando se carga, antes de que los visitantes interactúen con él. Para unirlo todo, establece la duración y la aceleración de la animación.
Para personalizar la animación:
- Elige cómo quieres personalizar la animación:
Ajustar el diseño del elemento
Diseñar el estado inicial del elemento
Establecer la duración y la aceleración de la animación
2. (Opcional) Haz clic en 
Reproducir en la barra flotante para obtener una vista previa de la animación.
Reproducir en la barra flotante para obtener una vista previa de la animación.3. Cuando esté todo listo, haz clic en Hecho.
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.Preguntas frecuentes
Haz clic a continuación 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?
|