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 una disminución gradual de la opacidad se le conoce como efecto de desvanecimiento. Este es el efecto que se usa para desvanecer la parte seleccionada en la página con un 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.
El efecto fadeOut se utiliza para cambiar el nivel de opacidad de los elementos seleccionados de visible a oculto. Al usar este método, el elemento desvanecido no ocupará ningún espacio. Estamos utilizando el método setInterval y el método clearInterval en esta lógica.
Sintaxis de las funciones integradas que se utilizarán en los códigos:
- setInterval(): Toma dos parámetros como:
setInterval(function_reference, time interval)
- clearInterval(): toma un solo parámetro como:
clearInterval(parameterof time to stop calling a function)
Enfoque 1: en la carga de la página, llamamos a una función llamada fadeout(), en la que usamos el método setInterval() que toma dos parámetros: uno es la referencia de la función (que en este caso se oculta) y el otro es el temporizador (en número ).
En la función ocultar, tomamos la opacidad de la propiedad en la variable de opacidad del nombre y la reducimos en 0,1 cada vez que se llama a la función de desvanecimiento.
Ejemplo 1:
<html>
<head>
<title>How to create fade-out effect
on page load using javascript</title>
<script type="text/javascript">
var opacity=0;
var intervalID=0;
window.onload=fadeout;
function fadeout(){
setInterval(hide, 200);
}
function hide(){
var body=document.getElementById("body");
opacity =
Number(window.getComputedStyle(body).getPropertyValue("opacity"))
if(opacity>0){
opacity=opacity-0.1;
body.style.opacity=opacity
}
else{
clearInterval(intervalID);
}
}
</script>
</head>
<body id="body">
<br>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to create fade-out effect
on page load using javascript
</b>
<p>
This page will fade-out
after loading
</p>
</body>
</html>
Producción:
Explicación:
- En el código anterior, la parte en la que se va a realizar el efecto de desvanecimiento se selecciona mediante
id(body in this case). - window.onload=fadeout , se usa para llamar a la función fadeout() automáticamente cuando la página continúa cargando.
- En la función fadeout(), también está llamando una función más con el nombre setInterval(), que llama a la función hide() en cada intervalo de 200 milisegundos hasta que se llama a clearInterval(), se llamará a clearInterval() cuando la opacidad de la parte seleccionada sea cero .
- En la función ocultar, se escribe una lógica simple para reducir la opacidad en 0.1 cada vez que se llama a la función fadeout() en la parte seleccionada. En esto, se usa getPropertyValue («opacity») para seleccionar la propiedad de opacidad.
- Estos trabajos continúan hasta que la opacidad se convierte en 0.
Nota: La opacidad se encuentra entre 0 y 1, en este caso, el valor de opacidad inicial se toma como 1.
Enfoque-2: 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 debe escribir la función completa en lugar de la referencia de la función. Este enfoque es comparativamente fácil.
Ejemplo 2:
<html>
<head>
<title>How to create fade-out effect
on page load using javascript</title>
<script type="text/javascript">
window.onload=fadeout;
function fadeout() {
var fade= document.getElementById("body");
var intervalID = setInterval(function () {
if (!fade.style.opacity) {
fade.style.opacity = 1;
}
if (fade.style.opacity > 0) {
fade.style.opacity -= 0.1;
}
else {
clearInterval(intervalID);
}
}, 200);
}
</script>
</head>
<body id="body">
<br>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to create fade-out effect
on page load using javascript
</b>
<p>
This page will fade-out after loading
</p>
</body>
</html>
Producción:
Explicación:
Nota: La opacidad se encuentra entre 0 y 1, en este caso, el valor de opacidad inicial se establece en 1.
- En el código anterior, la parte en la que se va a realizar el efecto de desvanecimiento se selecciona mediante
id(body in this case). - window.onload=fadeout , se usa para llamar a la función fadeout() automáticamente cuando la página continúa cargando.
- En la función fadeout(), estamos definiendo nuestra lógica en la variable intervalId que llama al método setInterval(), aquí en lugar de dar referencia a la función, se está definiendo la función completa.
- En función definida, cada vez que estemos comparando style.opacity con 0, y si es mayor que 0, se realizará una operación para disminuir la opacidad en 0.1 valor y cuando este valor sea 0, se llamará automáticamente a la función de borrado. .
- Este trabajo continúa hasta que la opacidad se convierte en 0 y se llama a la función clara.
Hemos tomado 0,1 y 200 milisegundos como valores numéricos, cualquier valor es aceptable.
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