12 bibliotecas CSS para hermosos efectos de desplazamiento de imagen

Permitir a los usuarios saber fácil y claramente en qué parte de la página web se puede hacer clic Es una parte importante del diseño UX. La forma antigua pero dorada de hacerlo era cambiar el color del texto y subrayarlo. Hoy en día, con CSS, hay muchas más formas de entregar efectos de desplazamiento, particularmente a las imágenes.

Los desarrolladores ahora pueden agregar efectos de transición o animación cuando se activa un evento de desplazamiento. Estamos viendo diapositivas direccionales, zooms a diferentes velocidades, desvanecimientos y desvanecimientos, efectos de bisagra, reveladores de reflectores, oscilaciones, rebotes y más.

En esta compilación, hay más de 250 efectos de desplazamiento para inspirarte También puede recoger el código en la fuente.

Cómo usar transiciones y animaciones CSS3 para resaltar cambios en la interfaz de usuario

Cómo usar transiciones y animaciones CSS3 para resaltar cambios en la interfaz de usuario

Los diseñadores y artistas tienen una larga historia de experimentar con movimiento, efectos y diferentes tipos de ilusiones con … Lee mas

Efectos de desplazamiento de imagen (16 efectos)

En esta página encontrará una buena colección de 16 efectos de imágenes flotantes con subtítulos. Tome el código HTML y CSS para cada efecto pasando el cursor sobre las imágenes y luego haciendo clic Mostrar código.

efectos de desplazamiento de imagen

Animación de desplazamiento del título de la imagen (4 efectos)

Aquí hay 4 animaciones de subtítulos geniales que se ejecutan cuando uno se desplaza sobre la imagen. Los efectos se crean con transiciones y transformaciones CSS3 puras, y sin JavaScript, para aumentar la compatibilidad entre navegadores.

efectos de desplazamiento de imagen

iHover (35 efectos)

iHover es una colección de efectos de desplazamiento activados por CSS3. Hay 20 efectos de desplazamiento circular y 15 efectos de desplazamiento cuadrado. Para usar los efectos, deberá escribir un marcado HTML e incluir los archivos CSS.

efectos de desplazamiento de imagen

Desplazamiento de imagen (44 efectos)

Esta biblioteca contiene 44 efectos hechos con CSS puro. Algunos de los efectos incluyen desvanecimientos, empujes, diapositivas, bisagras, revelaciones, zooms, desenfoques, volteos, pliegues y persianas, en múltiples direcciones. Hay una versión extendida de 216 efectos que se pueden comprar por 14 €.

efectos de desplazamiento de imagen

Ideas de efecto de desplazamiento (30 efectos)

Esta demostración de desplazamiento de imagen realizada por Codrop le brinda inspiración al realizar transiciones suaves entre las imágenes y sus subtítulos. Hay un total de 30 efectos en dos conjuntos con tutoriales y el código fuente.

efectos de desplazamiento de imagen

Desplazar CSS (108 efectos)

Hover CSS le permite agregar efectos de desplazamiento a cualquier elemento, como un botón, enlace o imagen. Los efectos incluyen transiciones 2D, transiciones de fondo, bordes, transiciones de sombras y resplandores, y más. La biblioteca está disponible en CSS, Sass y LESS.

efectos de desplazamiento de imagen

Animatismo (Más de 100 efectos)

Hay más de 100 animaciones de desplazamiento de imagen para botones, superposiciones, detalles, subtítulos, imágenes y botones de redes sociales. Todos los efectos funcionan con CSS3.

Efecto de desplazamiento del subtítulo (7 efectos)

Hay 7 efectos diferentes en esta colección. Todas las transiciones se ven realmente bonitas y suaves. Vaya a la sección del tutorial para aprender cómo aplicar estos efectos en su proyecto.

efectos de desplazamiento de imagen

Efectos de desplazamiento de imagen CSS (15 efectos)

Una colección de efectos de desplazamiento simples como zoom, deslizar, rotar, escala de grises, desenfoque, opacidad y otros efectos básicos. Puede usar estos efectos agregando la clase CSS antes de su figure etiqueta.

Efecto de desplazamiento 3D consciente de la dirección

Este es un efecto de desplazamiento súper genial que detectará el último movimiento del mouse. Los subtítulos de las imágenes se abrirán desde una de las cuatro direcciones según la última posición del cursor.

Azulejos con vuelo estacionario animado

Uno para diseños de mosaico, este presenta zoom lento, diapositivas, ventanas emergentes, superposición atenuada, entre otros.

Efecto SVG clip-Path Hover

Un efecto de desplazamiento de imagen de rayos X súper impresionante impulsado por SVG clip-path y transiciones CSS. Funciona bien en Chrome, Opera y Safari.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *