How to smoothly transition CSS background images using jQuery?
In this article, we will learn to implement a smooth transition of background images using jQuery and CSS.
Approach:
JavaScript Code snippet:
var image = new Image();
// Image for transition
image.src = "geek.png";
image.onload = function () {
$(".element").css("background-image",
"url('" + image.src + "')");
};
Example:Below is the full implementation of the above approach.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< style >
body {
width: 100%;
height: 100%;
}
.element {
background-image: url(
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 =
image.onload = function () {
$(".element").css("background-image",
"url('" + image.src + "')");
};
</ script >
</ body >
</ html >
|
Output:
Smooth transition
Last Updated :
12 May, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...