10 fragmentos personalizados de CSS y JavaScript para efectos de desplazamiento y clic

Los desarrolladores pueden crear algunos efectos locos con acciones simples del usuario, como pasar el mouse por encima y hacer clic con el mouse. Estos se relacionan principalmente con usuarios de escritorio, pero la web móvil también admite efectos de clic/toque en la mayoría de los navegadores.

Si está buscando algunas ideas geniales para replicar en sus propios proyectos, esta colección seguramente tendrá algo para usted. Cualquiera que conozca un poco de JavaScript y CSS puede modificar fácilmente estos efectos para que funcionen en cualquier navegador, para cualquier sitio web y mejorar la experiencia de un diseño.

Efectos de desplazamiento del botón

El punto de partida obvio para los efectos de animación son los botones CSS. Estos son los más prácticos en el uso diario ya que manejan mucha interactividad. Los botones CTA prácticamente piden atención y con estos efectos de desplazamiento puedes llamar la atención aún más rápido.

Cada efecto utiliza CSS puro para la animación. Un par de estos botones se basan en JavaScript para los eventos de mouseover, pero todas las animaciones aún se controlan directamente en CSS.

Si está diseñando un diseño plano, será muy fácil trabajar con estas animaciones.

Desplazamientos de navegación

Para este lápiz, encontrará un puñado de eventos de desplazamiento de navegación. Estos se basan en CSS puro que nuevamente controla cada hipervínculo con un efecto de desplazamiento diferente.

Los menús de navegación suelen ser muy simples y genéricos. Es por eso que los eventos flotantes realmente pueden animar el diseño y mostrar a los visitantes que te preocupas por los pequeños detalles.

La mayoría de estas animaciones son lo suficientemente mansas como para caber en cualquier sitio web, por lo que son excelentes para copiar y pegar fácilmente en cualquier diseño.

Efectos de desplazamiento de fotos

¿Con qué frecuencia encuentra galerías de fotos con subtítulos aburridos y sin contexto real? Los veo con demasiada frecuencia, y simplemente se sienten perezosos.

Realmente me gustan estos efectos fotográficos que se basan en la simple galería de miniaturas. Cuando pasa el cursor sobre una imagen, verá el título de la foto, una descripción y un botón "leer más".

Cada elemento se desliza a la vista desde diferentes ángulos y ayuda a que esta galería de imágenes se destaque de la página.

Información sobre herramientas de CSS

Todos los navegadores admiten información sobre herramientas predeterminada, pero siempre puede crear la suya usando complementos o clonando bolígrafos como este. Fue desarrollado por Ty Strong y muestra hasta dónde puede llevar la información sobre herramientas de CSS puro.

Todo este fragmento funciona apuntando a la etiqueta HTML <dfn>. Al pasar el cursor sobre cualquier texto envuelto en esta etiqueta, se desvanecerá automáticamente y aparecerá como una información sobre herramientas.

Los triángulos CSS puros han existido durante años, por lo que es bastante fácil recrear el estilo de información sobre herramientas. Pero estoy más impresionado con los estados de animación fluidos, todos controlados a través de CSS3.

Iconos CSS al pasar el mouse

Aquí hay otro ejemplo más de algo genial que puedes hacer con CSS puro. Todos estos botones simples tienen íconos ocultos que solo aparecen cuando un cursor cae sobre ellos.

Cada ícono proviene de Font Awesome para que puedas replicar este diseño con íconos totalmente gratuitos.

Los efectos incluyen deslizamientos, estiramientos e íconos de desvanecimiento que aparecen al pasar el mouse y desaparecen cuando el cursor se mueve a otra parte.

Paginación infinita

La paginación web siempre es bastante aburrida, probablemente porque no es una parte llamativa de la interfaz. Pero con este efecto de paginación de Mariusz Dabrowski podrías llevar tu paginación al siguiente nivel.

Lo único de esta animación es que está hecha para cargar de una página a otra. Por lo tanto, funciona mejor con páginas con tecnología Ajax donde no se recarga toda la página. De esta manera, toda la animación es visible mientras los nuevos contenidos se cargan a la vista.

Definitivamente tiene un valor práctico limitado, pero el efecto es magnífico.

Superposición de animación de navegación

Los menús de navegación a pantalla completa son muy populares para los sitios web con capacidad de respuesta móvil y también funcionan para la mayoría de los usuarios. Pero estos no tienen que ser aburridos o estáticos cuando tienes efectos superpuestos como este gratis en CodePen.

El desarrollador Ryan Mulligan creó esta animación bestial con fotogramas clave CSS puros que se ejecutan en una sola clase CSS.

El evento de clic se activa a través de jQuery, pero el movimiento es todo CSS. Definitivamente una de las animaciones más geniales que he visto y es sorprendentemente suave al arrancar.

Efecto de clic CSS puro

El diseño de materiales de Google describe una serie de efectos animados y uno es el efecto dominó. Esto es más común con los dispositivos Android, pero también se ha filtrado en la web.

Y con este bolígrafo, puede replicar el efecto dominó en su propio trabajo usando nada más que código CSS.

Este fragmento apunta a íconos que también se iluminan cuando se seleccionan, por lo que es un poco más como tabular/seleccionar elementos de página. Pero los efectos son transferibles a cualquier cosa que lo haga fácil de clonar.

Botón de maná

Este es uno de los efectos de botón más exclusivos que he visto usando SVG para las formas y CSS para la animación.

El codificador Dean Hidri creó este efecto de botón de maná con solo 80 líneas de CSS y un par de docenas de líneas de HTML (con el SVG incluido). Al pasar el mouse por encima, este botón anima una forma líquida personalizada dentro del botón para crear un relleno de fondo y luego se anima hacia fuera.

Si tiene un sitio que podría usar este estilo de botón, definitivamente vale la pena jugar con él.

Efectos de botón icónicos

Puedes hacer mucho con las fuentes de íconos y estos botones animados de David Darnes son un gran ejemplo.

Los íconos se animan de una manera diferente cuando se desplazan, cada uno con su propio efecto característico. Es posible que no use todos estos íconos en un sitio web, pero los estilos de animación personalizados son fáciles de clonar. Funcionan únicamente en CSS3 y encajarían con cualquier fuente de icono que elijas. ¡Un efecto realmente divertido de clonar para casi cualquier sitio web!

Y eso concluye mi lista de efectos UX, pero ciertamente esta no es la colección definitiva.

Si explora la web, puede encontrar muchos otros efectos de desplazamiento de botón/icono y muchos tienen un código fuente gratuito. Pero si desea obtener más información sobre la animación web personalizada, consulte nuestra enorme lista de complementos y recursos para desarrolladores.