HOWTO · JavaScript
Imagen de fundido de entrada usando JavaScript
La aparición gradual de una imagen para crear una interfaz de usuario visualmente atractiva se puede lograr con la ayuda de ciertos métodos y propiedades. El método requestAnimationFrame y la propiedad className es la forma preferible de desvanecerse en una imagen.
En esta página
Sin JavaScript, el estilo de aparición gradual de una imagen se puede evaluar con CSS. Pero el proceso no es confiable ya que no podemos manejarlo dinámicamente.
Por lo tanto, la forma JavaScript de jugar con el método requestAnimationFrame() en lugar de depender completamente de CSS y el método setTimeout() hace que la ruta sea más rápida y rápida. En el segmento de ejemplo, veremos una instancia de código que incluye la implementación del método requestAnimationFrame() y un código que puede desvanecerse en las imágenes que hacen referencia a la propiedad className.
Use la propiedad className para aparecer en la imagen
Generaremos una etiqueta img con un src viable. Hay un evento en el que se puede hacer clic para iniciar el fundido de entrada de la imagen. El trabajo principal aquí es con la propiedad className que se referirá a un determinado bloque CSS y lo alineará con la instancia img id.
Código - Archivo HTML:
<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>
Código - Archivo CSS:
img {
opacity: 0;
filter: alpha(opacity=40);
}
.animation {
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
opacity: 1;
}
Código - Archivo JavaScript:
function myFunction() {
document.getElementById('img').className = 'animation';
}
Producción:
Use el método requestAnimationFrame() para la imagen de aparición gradual
En este sentido, tendremos una función fadeIn que tomará la instancia de la etiqueta img. Más tarde, la función fadeIn operará en requestAnimationFrame() y setTimeout(), y se ubicará un marco de tiempo basado en el detalle actual del navegador.
Código - Archivo HTML:
<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>
Código - Archivo CSS:
img {
opacity: 0;
filter: alpha(opacity=40);
}
Código - Archivo JavaScript:
function fadeIn(el) {
el.style.opacity = 0;
var tick = function() {
el.style.opacity = +el.style.opacity + 0.05;
if (+el.style.opacity < 1) {
var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16)
}
};
tick();
}
function myFunction() {
var el = document.getElementById('what');
console.log(el);
fadeIn(el);
}
Producción:
