10 bibliotecas CSS para mejores efectos de desplazamiento de imagen
Dejar que los usuarios Saber con facilidad y claridad en qué parte de la página web se puede hacer clic. Es una parte importante del diseño de 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 ofrecer efectos de desplazamiento, especialmente a las imágenes..
Los desarrolladores pueden ahora agregue efectos de transición o animación cuando se active un evento flotante. Estamos viendo diapositivas direccionales, acercamientos a diferentes velocidades, desvanecimientos y desvanecimientos, efectos de bisagra, reveladores de focos, 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.
Efectos de desplazamiento de imagen (16 efectos)
En esta página encontrarás una bonita colección de 16 efectos de imágenes flotantes con subtítulos. Coge el código HTML y CSS de cada efecto al desplazarte sobre las imágenes y luego hacer clic en Mostrar código.
Animación de desplazamiento de imagen (4 efectos)
Aquí hay 4 animaciones de subtítulos geniales que se ejecutan cuando uno se sitúa sobre la imagen. Los efectos se crean con transiciones y transformaciones puras de CSS3, y sin JavaScript, para aumentar la compatibilidad en el navegador.
iHover (35 efectos)
iHover es una colección de efectos de desplazamiento activados por CSS3. Hay 20 efectos de desplazamiento del círculo y 15 efectos de desplazamiento del cuadrado. Para usar los efectos, necesitarás escribir un código HTML e incluir los archivos CSS.
Imagen flotar (44 efectos)
Esta biblioteca contiene 44 efectos hechos con CSS puro. Algunos de los efectos incluyen desvanecimientos, pulsaciones, diapositivas, bisagras, revelaciones, acercamientos, desenfoques, giros, pliegues y contraventanas, en múltiples direcciones. Hay una versión extendida de 216 efectos que se pueden comprar por € 14.
Hover efecto ideas (30 efectos)
Esta demostración de desplazamiento de imagen hecha por Codrop, le brinda inspiración cuando realiza transiciones suaves entre las imágenes y sus títulos. Hay un total de 30 efectos en dos conjuntos con tutoriales y el código fuente.
Hover CSS (108 efectos)
Hover CSS le permite agregar efectos de desplazamiento a cualquier elemento, como un botón, un enlace o una imagen. Los efectos incluyen transiciones 2D, transiciones de fondo, bordes, transiciones Sombra y Resplandor, y más. La biblioteca está disponible en CSS, Sass y LESS..
Animatismo (Más de 100 efectos)
Hay más de 100 animaciones de desplazamiento de imagen para botones, superposiciones, detalles, títulos, imágenes y botones de redes sociales. Todos los efectos son accionados por CSS3..
Efecto de desplazamiento de subtítulos (7 efectos)
Hay 7 efectos diferentes en esta colección. Todas las transiciones se ven muy bonitas y suaves. Vaya a la sección de tutoriales para aprender a aplicar estos efectos en su proyecto.
Efectos de desplazamiento de imagen CSS (15 efectos)
Una colección de efectos de desplazamiento simple como zoom, diapositiva, rotación, escala de grises, desenfoque, opacidad y otros efectos básicos. Puedes usar estos efectos agregando la clase CSS antes de tu figura etiqueta.
Efecto hover 3D sensible a la dirección
Este es un efecto super cool que detectará el último movimiento del mouse. Las leyendas de la imagen se abrirán desde una de las cuatro direcciones según la última posición del cursor.
Animación Hover
Aquí hay una animación de desplazamiento de borde inspirada en UNIQLO. Tras un evento de desplazamiento, el borde de la imagen se animará..
Azulejos con Hover animado
Uno para diseños de azulejos, este cuenta con zoom lento, diapositivas, entradas emergentes, superposición atenuada entre otros.
SVG clip-Path Hover Effect
Un súper impresionante efecto de desplazamiento de imagen con rayos X impulsado por SVG camino del clip y transiciones CSS. Funciona bien en Chrome, Opera y Safari.
