Cómo crear un efecto de desplazamiento de imagen en CSS

Los efectos de desplazamiento de la imagen pueden agregar un nivel adicional de pulido a su sitio web. Crean un efecto suave, haciendo que las galerías de imágenes o los carruseles sean más agradables de navegar. La mejor parte es que puedes crear estos efectos con solo CSS y sin JavaScript.

Puede crear diferentes estilos de animación en sus imágenes. Estos incluyen difuminar o hacer zoom en el fondo, desvanecer o deslizar el texto y cambiar el color de fondo.

Creando el HTML para las Imágenes

Comience por crear un índice.html archivo dentro de una carpeta vacía en su computadora, luego abra el archivo con un editor de texto. Dentro del archivo, cree el esqueleto HTML y agregue el siguiente marcado dentro del cuerpo de apertura y las etiquetas del cuerpo de cierre:

<divisiónclase="red">
<divisiónclase="envoltorio de imagen">
<imagenclase="difuminar"origen=" https://picsum.photos/500?random=1"alternativa="">





instagram viewer

<divisiónclase="desvanecimiento del contenido">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Anuncio de Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
división>
división>
<divisiónclase="envoltorio de imagen">
<imagenclase="desenfoque de zoom"origen=" https://picsum.photos/500?random=2"alternativa="">
<divisiónclase="desvanecimiento del contenido">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Anuncio de Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
división>
división>
<divisiónclase="envoltorio de imagen">
<imagenclase="difuminar"origen=" https://picsum.photos/500?random=3"alternativa="">
<divisiónclase="contenido deslizar hacia la izquierda">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Anuncio de Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
división>
división>
<divisiónclase="envoltorio de imagen">
<imagenclase="gris"origen=" https://picsum.photos/500?random=3"alternativa="">
<divisiónclase="contenido deslizar hacia la izquierda">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Anuncio de Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
división>
división>
división>

Este es un contenedor de cuadrícula con cuatro envoltorios de imagen. Los elementos div con el envoltorio de imagen class sirven como envoltorio para la imagen y su texto correspondiente. La imagen y el contenido de cada sección tienen un conjunto único de clases añadidas.

Dentro de la hoja de estilo, verá orientar estos elementos por sus nombres de clase y aplicar los diversos efectos de estilo y animación. El texto no se mostrará por defecto; solo lo mostrará cuando pase el mouse sobre el envoltorio de la imagen, y la imagen sufrirá diferentes efectos en el proceso.

Agregar CSS básico

Ahora que ha creado el HTML, es hora de diseñarlo con CSS. Crear un estilo.css archivo y enlace a esta hoja de estilo desde su archivo HTML, dentro del sección:

<enlacereal="hoja de estilo"href="estilo.css">

dentro de tu estilo.css archivo, lo primero que debe hacer es restablecer el margen en el cuerpo a cero y establecer un margen inferior:

cuerpo {
margen: 0;
margen inferior: 20movimiento rápido del ojo;
}

A continuación, debe convertir el contenedor más externo en un Cuadrícula CSS que puede usar para diseñar elementos en dos dimensiones. El siguiente código crea una cuadrícula con tantas columnas o filas que quepan. El tamaño mínimo de cada columna es 300px y el tamaño máximo es 1 fracción del contenedor:

.red {
mostrar: red;
cuadrícula-plantilla-columnas: repetir(ajuste automático, mínimo máximo(300píxeles, 1es));
}

Dado que desea colocar el texto en relación con su contenedor, debe establecer la posición en relación con el envoltorio de la imagen:

.imagen-envoltura {
posición: relativo;
Desbordamiento: oculto;
}

El siguiente paso es diseñar la imagen. Muestre la imagen como un elemento de bloque, haga que abarque el ancho de todo el contenedor y colóquelo ajustado en el centro de su contenedor:

.imagen-envoltura > imagen {
mostrar: bloquear;
ancho: 100%;
relación de aspecto: 1 / 1;
ajuste de objeto: cubrir;
posición del objeto: centro;
}

En cuanto al texto, colócalo en el centro y dale un color de fondo gris claro y transparente:

.imagen-envoltura > .contenido {
posición: absoluto;
recuadro: 0;
tamaño de fuente: 2movimiento rápido del ojo;
relleno: 1movimiento rápido del ojo;
fondo: rgb(255, 255, 255, .4);
mostrar: doblar;
alinear elementos: centro;
justificar-contenido: centro;
}

Guarde el archivo CSS y abra índice.html en tu navegador. Deberías encontrar una página similar a la de la imagen de abajo.

Configuración de la transición en las imágenes y los textos

Ahora que ha aplicado los estilos básicos a las imágenes, el siguiente paso es agregarles algo de animación. Comience agregando una transición a ambas imágenes y su texto correspondiente:

.imagen-envoltura > imagen,
.imagen-envoltura > .contenido {
transición: 200EMfacilidad de entrada y salida;
}

Esto significa que todos los efectos de transición (es decir, fundido de entrada, zoom y desenfoque) durarán 200 milisegundos y tendrán la misma curva de tiempo.

Animación de fundido y desenfoque

El primer estilo de animación se desvanece en el texto. Cuando pasa el cursor sobre un envoltorio de imagen en particular, el contenido que tiene la desteñir class tendrá este efecto (animación de aparición y desaparición gradual) aplicado. Esto se logra estableciendo la opacidad en cero y cambiándola a uno cuando el mouse se desplaza sobre un envoltorio de imagen en particular:

.imagen-envoltura > .contenido.desteñir {
opacidad: 0;
}
.imagen-envoltura:flotar > .contenido.desteñir {
opacidad: 1;
}

Si guarda el archivo y revisa su navegador, verá la animación de aparición gradual en efecto. Pero también puede notar que el texto es un poco difícil de leer (si la imagen es marcada y tiene mucho contraste). Recuerde que todas las imágenes también tienen un nombre de clase difuminar. Esto es para difuminar las imágenes para agregar un contraste muy necesario entre ellas y el texto:

envoltorio de imagen:flotar > imagen.difuminar {
filtrar: difuminar(5píxeles)
}

Ahora, cuando pasas el cursor sobre la imagen, puedes ver que simplemente se desvanecerá. Puede aumentar el valor del píxel para hacer que el desenfoque sea más pronunciado en las imágenes, agregando así más contraste entre ellas y el texto.

Agregar otros efectos

Los otros efectos son deslizar el texto desde la izquierda, hacer zoom en la imagen y agregar escala de grises a la imagen. Aquí está el código para lograr los tres efectos:

.imagen-envoltura > .contenido.slide-left {
transformar: traducirX(100%)
}
.imagen-envoltura:flotar > .contenido.slide-left {
transformar: traducirX(0%)
}
.imagen-envoltura:flotar > imagen.gris {
filtrar: escala de grises(1)
}
.imagen-envoltura:flotar > imagen.difuminar {
filtrar: difuminar(5píxeles)
}
.imagen-envoltura:flotar > imagen.zoom {
transformar: escala(1.1)
}

Guarde el archivo, luego vaya a su navegador y coloque el cursor sobre cada imagen. Deberías ver los diferentes efectos en acción.

Para completar los efectos de deslizamiento, puede crear tres envoltorios de imagen más, cada uno con una imagen y texto. Cada pieza de texto tendría el nombre de la clase. deslizar hacia arriba, bajar deslizándose, o levemente a la derecha. Entonces pasarías el valor adecuado en píxel, em o rem, dentro de transformar() para crear los tres efectos.

Cuadrícula CSS y Flexbox

CSS Grid y Flexbox son dos funciones que le permiten crear fantásticos diseños para su sitio web. Puede crear prácticamente cualquier diseño que desee con facilidad y personalizar las filas y columnas a su gusto. Las columnas también responderán de forma predeterminada. Aprender cuándo usar uno sobre el otro lo ayudará a convertirse en uno de los mejores desarrolladores de CSS.