Los efectos de desplazamiento son parte fundamental de la mayoría de los diseños web. Pueden ser sencillos, como ampliar una imagen, o activar animaciones de varios pasos. En este tutorial, te guiaremos a través de los conceptos básicos y un par de técnicas un poco más avanzadas para que empieces a integrar efectos de desplazamiento en tus propios diseños.
Los efectos de desplazamiento aportan interactividad y movimiento al diseño, creando una experiencia web más dinámica. Tanto si indican un enlace activo como si activan una ráfaga de animación, estos efectos ofrecen una respuesta inmediata. Pueden guiar a los visitantes a realizar una acción deseada o actuar como un adorno artístico que da vida a un espacio digital.
Los efectos de desplazamiento varían en complejidad, pero crear los más sencillos en Webflow implica:
- Seleccionar el elemento al que quieres aplicar el efecto de desplazamiento
- Cambiar el menú de estados al estado "hover" y ajustar el estilo
- Volver al estado "none" y añadir una transición
Empecemos viendo cómo estos 3 pasos pueden utilizarse para crear una de las interacciones más básicas: el efecto de desplazamiento y zoom.
Cómo crear un efecto básico de desplazamiento y zoom
Para mostrarte cómo crear tu propio efecto de zoom al pasar el cursor, vamos a desglosar cómo hemos construido el nuestro. ¿Quieres seguir los pasos? Abre el proyecto en Webflow.
Al hacer clic en la imagen, esta se selecciona en el Navegador y revela su nombre: image-bg. El Navegador muestra la jerarquía de los elementos y podemos ver que la imagen está contenida en el bloque div llamado: divZoomImage.
Para averiguar qué le ocurre a esta imagen cuando pasamos el cursor por encima, podemos seleccionar "hover" en el menú desplegable de estados de este elemento. Podemos ver un efecto de transformación que la escala 1.2 veces tanto en el eje X como en el Y.
El efecto de transformación es parte del estado "hover". La velocidad a la que la imagen aumenta de tamaño es una transición añadida al estado "none" (o predeterminado). La transición está configurada para durar 500 milisegundos y tiene un modo de suavizado de tipo "ease".
Este es un ejemplo de un efecto de desplazamiento aplicado a una imagen, pero ¿qué pasa si queremos jugar con las formas? Este efecto de círculo a cuadrado sigue el mismo proceso: el estado "none" contiene la transición entre estados y el estado "hover" controla lo que ocurre al pasar el cursor.
En el estado "hover", es simplemente un bloque div con un fondo azul.
Al ir al estado "none", vemos que las esquinas tienen un radio del 50%, lo que crea un círculo. Por lo tanto, pasa de ser un círculo (con las esquinas configuradas a un radio del 50%) a ser un cuadrado (con el radio de las esquinas configurado a 0%).
Un tiempo de transición de 350 ms controla la velocidad de esta transformación de círculo a cuadrado. Puede parecer una animación compleja, pero es solo cuestión de reducir la redondez del círculo hasta que tenga esquinas, dando como resultado un bloque div azul sencillo.
Los diferentes estados de "none", "hover", "pressed" y "focused" en el menú de estados se conocen como pseudoclases. No entraremos en demasiados detalles sobre las diferencias entre ellos aquí, pero echa un vistazo a este tutorial en Webflow University para saber más.
También puedes dirigirte a esta página de pruebas en Webflow. Contiene estos efectos de desplazamiento y muchos más para explorar; solo tienes que hacer clic en el icono de Páginas en la barra de herramientas de la izquierda.
Uso de filtros para ir más allá de lo básico
Ya vimos cómo añadir efectos en el estado hover y cómo configurar el tiempo de transición en el estado none. Para crear efectos hover más sofisticados, como hacer que un elemento aparezca o desaparezca gradualmente, o darle color a una imagen en escala de grises, necesitamos aplicar filtros.
Latinxs Who Design es un escaparate de diseñadores, todo organizado en una cuadrícula. Al pasar el cursor sobre cada retrato en blanco y negro, este cobra color y aumenta de tamaño.
Veamos qué ocurre en el estado hover.
Aquí vemos un efecto de transformación (igual que el zoom al pasar el cursor que vimos antes) que escala la imagen 1.2 veces tanto en el eje X como en el Y.
También hay dos filtros activos: la saturación está al 110% y el contraste tiene un valor del 120%.
Volvamos al estado none para ver en qué valores empiezan estos filtros.
Vemos que la saturación comienza en 0%, lo que elimina todo el color y transforma las imágenes a blanco y negro. El contraste empieza en 109% y sube a 120% al pasar el cursor, haciendo que la imagen destaque más y que el efecto sea más impactante. Ambos efectos tienen un tiempo de transición de 800 milisegundos.
Además de la saturación y el contraste, hay otros filtros para elegir, como el cambio de tono (hue rotate) y el desenfoque. Solo por diversión, añadamos un filtro de desenfoque con el radio predeterminado de 5px y veamos cómo queda.
Sí, esto es demasiado; le quita impacto al efecto original. Mostrar moderación y no sobrecargar de efectos hace que los elementos interactivos resulten atractivos en lugar de molestos.
Si quieres clonar o explorar este diseño más a fondo, échale un vistazo en Webflow.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Primeros pasos con acciones temporizadas
¿Qué pasa si quieres crear efectos hover más complejos, como una animación activada con varios pasos temporizados? En la foto interactiva de arriba, creada por the Digital Bake, varios elementos se ven afectados por animaciones que se activan al pasar el cursor por encima y al retirarlo.
Tener una página de equipo es una forma genial de darle un toque personal a tu negocio, pero estas páginas suelen ser estáticas y sin mucho interés visual que capte la atención. Digital Bake aporta interactividad a lo que a menudo es un elemento pasado por alto.
Todos los elementos están contenidos en el bloque div “Team Member Wrapper”. El símbolo del rayo que aparece junto a él en el Navegador nos indica que se ha aplicado una interacción.
Echemos un vistazo a esta interacción:
Tiene un activador de elemento, lo que significa que pasar el cursor sobre el bloque div “Team Member Wrapper” inicia la animación.
Al hacer clic en “Mouse Hover” se abren los detalles de esta animación activada.
Aquí están las animaciones temporizadas que se activan. Vamos a ignorar las que llevan el título “SYSTEM”, ya que nos centraremos en la imagen del miembro del equipo.
La vista previa nos muestra esta animación activada en acción.
Aquí tienes las acciones temporizadas que componen esta animación al pasar el cursor.
“Team Member Read More” comienza con una opacidad del 0%, que aumenta al 100% en el transcurso de 20 segundos y hace que aparezca el botón de leer más.
Así es como se ve al principio:
Y a los 20 segundos:
La “Team Member Image” aumenta su escala a 1.05 en los ejes X e Y, comenzando en el segundo 0:
“Team Member Hover Out” simplemente invierte este efecto, devolviendo la imagen a su estado predeterminado y haciendo que el botón de leer más desaparezca.
Echa un vistazo más de cerca a cómo se hizo abriéndolo en Webflow. Hay algunas animaciones adicionales que no tienen nada que ver con el tema central de este artículo, pero siéntete libre de explorar qué más ocurre en este diseño. Y consulta nuestro tutorial sobre disparadores y animaciones para obtener una explicación más detallada.
Pasando a técnicas más avanzadas mediante la creación de una tarjeta de equipo en 3D
Esta tarjeta de miembro de equipo en 3D (también cortesía de Digital Bake) se basa en los conceptos básicos de los efectos al pasar el cursor que ya hemos visto.
Veamos cómo se hizo esto.
Cada parte de este bloque está contenida en un bloque de enlace llamado “Card Wrapper”. Estos son sus elementos:
Podemos ver, al igual que en el ejemplo anterior, que hay una interacción que afecta a estos elementos.
Al hacer clic en el icono de interacción, vemos que se trata de una interacción activada al mover el ratón sobre un elemento. En este caso, el “Card Wrapper”.
Exploremos esto haciendo clic en Team Member Hover y echando un vistazo a las acciones del ratón en el eje X.
En lugar de una línea de tiempo, obtenemos un rango del 0% al 100%, que representa el movimiento del cursor en el eje X desplazándose de un lado a otro en este plano horizontal, donde el 0% es el lado izquierdo de la imagen y el 100% el derecho.
Todo el “Card Wrapper” tiene un efecto de rotación aplicado, mientras que los otros elementos simplemente se mueven lateralmente en el eje X.
Bien, veamos qué sucede con las acciones del ratón en el eje Y.
Una vez más, obtenemos un rango de 0 a 100%, que es el movimiento en el eje Y que activa cada evento de esta animación. El 0% está en la parte superior de la página y el 100% en la parte inferior.
También puedes clonar esto para tu propio uso y ver cómo se construyó en Webflow.
Llevando los efectos al pasar el cursor un paso más allá
Los efectos al pasar el cursor hacen que cualquier diseño sea mucho más interesante. Las páginas estáticas solo sirven para aburrir a las mentes inquietas.
Hay un montón de efectos más que puedes probar, pero esperamos que esta introducción te sirva para empezar. Pásate por nuestro curso de interacciones y animaciones para aprender mucho más y descubrir todo lo que puedes hacer en tus diseños.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
