Cómo utilizar la animación de desplazamiento en el diseño web
Color al pasar el mouse
Establecer el color del elemento al pasar el mouse ayuda a centrar la atención de los visitantes en un elemento y da una impresión y un concepto de la idea deseada sobre su significado. Puede cambiar el color del elemento al pasar el mouse. Para eso, seleccione un elemento y, en el Panel de propiedades, vaya a la sección Animación activada, haga clic en el enlace Hover y luego en la casilla de verificación Hover. Modifique el color que se aplicará al pasar el mouse.
Borde al pasar el mouse
El borde del elemento también es importante para mejorar la interacción de los elementos y llamar la atención de los visitantes. Puede cambiar el borde de desplazamiento para elementos tales como icono, imagen, forma, grupo, cuadrícula, etc. En la sección de desplazamiento del panel de propiedades, marque la casilla de verificación de desplazamiento. Modifique el borde que se mostrará al pasar el mouse sobre un elemento.
Radio al pasar el mouse
Para imágenes y formas, grupos y celdas de cuadrícula, puede cambiar el radio al pasar el mouse. Los elementos se vuelven atractivos con esta propiedad, lo que impulsa la acción (botones Comprar ahora, Leer más, etc.) y hacer que su diseño sea único. En la sección de desplazamiento del panel de propiedades, habilite el modo de desplazamiento. Arrastre el control deslizante Radio para establecer su valor al pasar el mouse.
Sombra al pasar el mouse
Puede modificar la propiedad Sombra en Hover para textos y otros elementos. Para configurar la sombra al pasar el mouse, agregue o seleccione un elemento. A continuación, haga clic en el enlace Hover del Panel de propiedades, marque la casilla de verificación Hover, modifique la Sombra que se aplicará al Hover. Puede comenzar con uno de los ajustes preestablecidos de sombra y personalizarlo si es necesario.
Transparencia al pasar el mouse
Puede modificar la transparencia del elemento al pasar el mouse para agregar interacción y atractivo al diseño del sitio web. En el Panel de propiedades, haga clic en el enlace Hover y marque la casilla de verificación Hover. Establezca la transparencia que se aplicará al pasar el mouse. Haga clic en algún lugar del bloque para anular la selección del elemento. Coloca el cursor sobre el elemento para probar el cambio de transparencia.
Move On Hover
Los efectos de animación de desplazamiento que se utilizan en los sitios web modernos se han vuelto más sofisticados. Uno de los ejemplos de efectos es el elemento Move on Hover. Puede agregar el movimiento de un elemento al pasar el mouse. Agregue o seleccione un elemento y vaya al Panel de propiedades. Haga clic en el enlace Hover y luego marque la casilla de verificación Hover. Establezca los valores para la propiedad Move X, Y.
Rotación al pasar el mouse
La rotación al pasar el mouse es el siguiente efecto importante y complejo. Para rotar un elemento al pasar el mouse, agregue o seleccione un elemento y vaya al Panel de propiedades. Vaya a y haga clic en el enlace Hover en la sección Animation On, y luego marque la casilla de verificación Hover. Use el control deslizante para establecer el ángulo de rotación o ingrese el valor en el campo de entrada. Los valores admitidos para el ángulo de rotación son de 0 a 359.
Escalar al pasar el mouse
La escala puede parecer la reacción más natural en su cursor. Por tanto, puede ser muy popular. Puede agregar fácilmente Scale On Hover a su sitio web. Para eso, agregue o seleccione un elemento y luego vaya al Panel de propiedades. Haga clic en el enlace Hover de la sección Animation On y marque la casilla de verificación Hover. Desplácese hacia abajo hasta las propiedades Escalar, Girar y Mover. El tamaño real es igual a 100.
Duración de desplazamiento
Puede administrar la animación de desplazamiento estableciendo su Duración. Establecer la duración de la animación al pasar el mouse, agregue o seleccione un elemento y vaya al Panel de propiedades. Seleccione el enlace Hover de la sección Animation On y elija la casilla de verificación Hover. Los valores admitidos para el control deslizante son de 10 a 200, y puede ingresar un número mayor en este campo si es necesario.
Color de fondo a degradado al pasar el mouse
Al agregar la animación de desplazamiento a una forma con un fondo, es posible que desee cambiar el relleno sólido a algo atractivo, como un degradado. Para eso, seleccione una forma y vaya al enlace de desplazamiento del panel de propiedades. Haga clic en el enlace Animation On -> Hover y marque la casilla de verificación Hover. Seleccione el tipo de degradado para el fondo y establezca el degradado.
Imagen de fondo a imagen al pasar el mouse
También puede cambiar el relleno a imágenes e incluso cambiar una imagen de fondo a otra mientras se desplaza, lo que puede entretener mucho a sus visitantes. Seleccione una forma y agregue una imagen para el fondo. Vaya a la sección Animación activada del Panel de propiedades y haga clic en Hover. Habilite el efecto Hover y seleccione la imagen como el tipo de fondo. Elija la imagen flotante. Prueba.