El efecto de desvanecimiento se describe como el aumento y la disminución graduales de la opacidad de la parte seleccionada. En otras palabras, el efecto de desvanecimiento se denomina aumento y disminución de la opacidad con respecto al tiempo. Cuando este efecto se aplica con un aumento gradual de la opacidad se le conoce como efecto fundido. Este es el efecto que se utiliza para aplicar un fundido de entrada en la parte seleccionada de la página con el intervalo de tiempo seleccionado. El efecto Fade-out y Fade-in es maravilloso para usar en proyectos web, ya que enfatiza el estilo de la página web. Estamos usando el método setInterval() y el método clearInterval() en estas lógicas. A continuación, iremos con dos enfoques con la descripción y el ejemplo adecuados.
Usando el método setInterval(): en la carga de la página, estamos llamando a una función llamada método fadeIn() . En el que estamos usando el método setInterval() que toma dos parámetros, uno es la referencia de la función (que es show() en este caso) y el otro es el temporizador (en número), que llamará a la función show() después de cada intervalo de tiempo dado. En la función show() estamos tomando la opacidad de la propiedad en la variable de nombre ‘opacidad’ y aumentándola en 0.1 cada vez que se llama a la función fadeIn() . Inicialmente, la opacidad de la parte seleccionada se establece en 0. Dos variables, opacidad e ID de intervalo, se declaran dentro de la etiqueta del script. La opacidad variable se ocupa de la opacidad del proyecto, mientras queintervalID se usa para llamar a la función clearInterval() . Entonces window.onload=fadeIn , se usa para llamar a la función fadeIn() automáticamente. La función fadeIn() llama a un método incorporado setInterval(), que toma dos parámetros, uno es la referencia de función (mostrar() en este caso) y el intervalo de tiempo (para tomar referencia de la función después del intervalo seleccionado). En setInterval(), se llama a la función show() después de cada 200 milisegundos en los que estamos verificando la opacidad del cuerpo (el cuerpo de la variable contiene el cuerpo completo con la ayuda de id), si es menor que 1, habrá un incremento de 0.1 en opacidad, de lo contrario , se llama a la función clearInterval(), que detendrá la función que llama a show() .
Nota: La opacidad de la parte seleccionada se establece en cero para comprender el efecto.
- Ejemplo:
<!DOCTYPE html><html><head><title>fade-in effect on page load using JavaScript</title><scripttype="text/javascript">var opacity = 0;var intervalID = 0;window.onload = fadeIn;function fadeIn() {setInterval(show, 200);}function show() {var body = document.getElementById("body");opacity = Number(window.getComputedStyle(body).getPropertyValue("opacity"));if (opacity <1) {opacity= opacity + 0.1;body.style.opacity= opacity} else {clearInterval(intervalID);}}</script></head><bodyid="body"style="opacity: 0;"><br><h1style="color: green">GeeksforGeeks</h1><b>How to create fade-in effecton page load using javascript</b><p>This page will fade-in after loading</p></body><html> - Producción:
Usando el método clearInterval(): en este enfoque, la lógica completa se escribe dentro de una variable que se realiza con la ayuda del método setInterval(), aquí se escribe la función completa en lugar de la referencia a la función. Este enfoque es comparativamente fácil de entender. El valor predeterminado de opacidad es 1, por lo que debemos establecerlo en cero. para observar la salida El window.onload=fadeIn , se usa para llamar a la función fadeIn() automáticamente. Ahora declarando 3 variables en la función fadeIn():
- fade: Sirve para recuperar la parte en la que se aplicará el efecto de fundido de entrada.
- opacidad: Es para lidiar con la opacidad de la porción buscada.
- ID de intervalo: es para tratar con la lógica completa y para terminar la lógica.
Ahora, en lugar de escribir una referencia de función, se debe escribir una función completa, que se llamará una y otra vez cada 200 milisegundos para aumentar la opacidad. Ahora, en la función escrita, la opacidad de la parte recuperada se compara con 1 en cada llamada
- Si se encuentra una opacidad inferior a 1, la opacidad aumentará en 0,1 y se aplicará a la parte recuperada.
- Si la opacidad es 1 o mayor que 1, se llama a la función clearInterval() para finalizar las llamadas a funciones.
- Ejemplo:
<!DOCTYPE html><html><head><title>fade-in effect on page load using JavaScript</title><scripttype="text/javascript">window.onload = fadeIn;function fadeIn() {var fade = document.getElementById("body");var opacity = 0;var intervalID = setInterval(function() {if (opacity <1) {opacity= opacity + 0.1fade.style.opacity= opacity;} else {clearInterval(intervalID);}}, 200);}</script></head><bodyid="body"style="opacity:0;"><br><h1style="color: green">GeeksforGeeks</h1><b>How to create fade-in effecton page load using javascript</b><p>This page will fade-in after loading</p></body></html> - Salida: este video de salida está en el bucle, es por eso que no se detiene después de obtener la opacidad 1. Se carga una y otra vez automáticamente.
Nota: Si el valor de incremento es superior a 0,1, se desvanecerá más rápido. Si el intervalo de tiempo disminuye, también se desvanece más rápido.
Publicación traducida automáticamente
Artículo escrito por _mridul_bhardwaj_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA