Cómo crear un efecto de animación de desvanecimiento con JavaScript y CSS

Las animaciones, las transiciones y los efectos 3D son nada menos que un llamativo. Siempre que esté creando su sitio web o un proyecto, no desea que se pierda en el clúster de millones de sitios web disponibles en Internet. Desea que se destaque, desea que divida a sus usuarios y se almacene en sus mentes subconscientes. Para hacer que sus páginas web sean más intrigantes, debe utilizar varias animaciones y efectos de transición de páginas.

Uno de los efectos de animación populares y extremadamente interesantes es el Fundirse y Desagüe Animación, que se puede implementar utilizando JavaScript y HTML \ CSS.

Paso 1: Configure la página básica

Cree un nuevo HTML en su editor de código preferido, cree un script.archivo js y un estilo.Archivo CSS también como se muestra:

Dentro del archivo HTML, enlace el archivo CSS y el script.Archivo JS utilizando las siguientes líneas antes de la etiqueta del cuerpo:

Ahora, vamos a implementar una animación de desvanecimiento en una imagen, y para la imagen, vamos a usar una imagen libre de regalías de Unsplash. Puede crear una etiqueta de imagen y un botón que usaremos para desvanecer y desvanecer la imagen con las siguientes líneas:

id = "imagen" src = "https: // imágenes.sin estelares.com/Photo-1640273837947-EA830D50C191?ixlib = RB-1.2.1 & ixid = mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8 & auto = format & fit = cultivo & w = 2072 & q = 80 "
alt = ""
/>


Efecto de desvanecimiento

Observe que le hemos dado la identificación "Imagen" a la imagen y la identificación de "Mybutton" al botón que estamos creando.

Dado que la imagen es bastante grande, vamos a establecer una altura y un ancho particular en el archivo CSS utilizando las siguientes líneas:

#imagen
Altura: 200px;
Ancho: 200px;

Tu página debería verse así:

Tenemos nuestra imagen en el centro de la pantalla y justo debajo de la imagen que tenemos nuestro botón.

Paso 2: Modificación del archivo CSS

Hay muchas formas de implementar una animación particular utilizando CSS y JavaScript, pero para esta publicación en particular vamos a jugar con clases y el atributo de opacidad del CSS. Modifique su archivo CSS con las siguientes líneas:

#imagen
Opacidad: 1;
Transición: Opacidad 0.3s Facilia-Out;
Altura: 200px;
Ancho: 200px;

#imagen.desteñir
Opacidad: 0;

Para explicar lo que estamos haciendo en las líneas anteriores: simplemente estamos poniendo la opacidad de la imagen a 100% al principio y si la imagen tiene una clase activa "desteñir" Entonces la opacidad cambiará a 0%. Pero, este cambio de opacidad sucederá en una instancia, para hacer un efecto similar a la animación, usamos el atributo de transición y lo establecemos en 0.3S.

Ahora, todo lo que necesitamos hacer es escribir un script que alterne la clase "Desteñir" de la imagen

Paso 3: Clase de alternativa con JavaScript

En el guión.Archivo JS, primero vamos a buscar el elemento de imagen y almacenarlo dentro de una variable, y luego vamos a alternar la clase, pero todo esto debe hacerse en el botón Presione. Entonces, agregue las siguientes líneas en el archivo de script:

Sea imagen = documento.getElementById ("imagen");
documento.getElementById ("mybutton").onClick = function ()
imagen.Lista de clase.Toggle ("Fade");
;

Entonces, con esto también deberíamos poder implementar la animación de desvanecimiento y la transición de desvanecimiento.

Paso 4: Probar nuestra animación

El último paso es ejecutar el archivo HTML en nuestra máquina local y probar la animación al presionar el botón, debería ver la siguiente salida:

Como puede ver en el GIF anterior, nuestra animación funciona perfectamente.

Conclusión

Las animaciones se pueden implementar fácilmente con el uso de JavaScript junto con HTML y CSS para que las páginas web se vean mucho más atractivas y llamativas. En esta publicación, aprendimos cómo hacer una animación de desvanecimiento y desvanecimiento en un elemento HTML asignando diferentes propiedades de CSS en la clase del elemento y luego alternando las clases usando JavaScript.