En este artículo, aprenderemos a implementar una transición fluida de imágenes de fondo usando jQuery y CSS.
Acercarse:
- Primero, agregamos una imagen de fondo transparente usando la propiedad background-image en CSS en la etiqueta de estilo.
background-image: url(white.jpg);
- Para la imagen de fondo de transición, usamos la propiedad de transición en CSS y agregamos una transición a la imagen de fondo en la etiqueta de estilo.
transition: background-image 3s;
- En la sección de secuencias de comandos, creamos un objeto de imagen y agregamos la fuente de la imagen que debe cambiarse. Al cargar la imagen, llamamos a una función que agrega una imagen de fondo usando el método css() en JQuery.
Fragmento de código JavaScript:
var image = new Image();
// Image for transition
image.src = "geek.png";
image.onload = function () {
$(".element").css("background-image",
"url('" + image.src + "')");
};
Ejemplo: a continuación se muestra la implementación completa del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- JQuery CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
width: 100%;
height: 100%;
}
.element {
background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210507170406/white.jpg);
width: 60%;
height: 100%;
padding: 200px;
background-repeat: no-repeat;
transition: background-image 3s;
}
</style>
</head>
<body>
<div class="element"></div>
<script>
var image = new Image();
// Image for transition
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210507170600/gfg1-300x67.png";
image.onload = function () {
$(".element").css("background-image",
"url('" + image.src + "')");
};
</script>
</body>
</html>
Producción:
Transición suave
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA