Want to learn a new UI trick? Here's how to make an image change animation (or whatever you call it) with mostly JS! All we need is a few image URLs, functions, and a special operation. First, I'll quickly tell the HTML and CSS, then I'll explain the Javascript piece by piece so you can understand and use this code for your own projects (it'll take a little bit of understanding in divison).
HTML & CSS
If you want to follow along with me, first with HTML make a div rectangle with a long height but short width, I made it this size since most of the images I've gotten (which were from Unsplash) were this type of size. Next, I gave the div a background-size
to cover
, to ensure the images I gave it fit. Finally, I gave the html and body a width
and height
of 100%
so I could use flex on the body to center it.
HTML
<html>
<body>
<div class="box">
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
}
/*centering the box*/
body {
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 350px;
/*making sure the images will fit inside*/
background-size: cover;
}
*Just because this is the way I made does not mean you can't make it your own way!
Collecting the image URL's
Now for the JS, first we collect the box with querySelector()
then we store it in a variable. Next we make an array full of image url's of our choice. Lastly we make a urlArrayLength
variable that stores the length of the url array.
var box = document.querySelector('.box');
var imageUrls = [
"https://images.unsplash.com/photo-1693305911839-ec783e3145d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",
"https://images.unsplash.com/photo-1692821565372-15f7219ede0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
"https://images.unsplash.com/photo-1692175033119-8e2224157199?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
"https://images.unsplash.com/photo-1692283578489-ee4cfffa3ae1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
"https://images.unsplash.com/photo-1587336477546-bb3a2a7887fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80"
];
var urlArrayLength = imageUrls.length; //gets the length of the array
Image change functions
After making our array and variables now we make a function called imageChange()
. In it first there will be a variable called index
with a starting value of 0. This variable is important because it represents which image we're selecting in the urlArray. Now we make a function inside the imageChange()
function called newImage()
it'll be used to constantly pick the next image to be shown.
function ImageChange() {
//Will be used as the index number of an image we'll pick
let index = 0;
function newImage() {
}
}
Now inside the image change function, we'll code it so the box's background image will be set to the image url with the index equal to our index variable. To do this we write box.style.backgroundImage
and set it to the url in the urlArray that's index matches the index variable.
function ImageChange() {
//Will be used as the index number of an image we'll pick
let index = 0;
function newImage() {
//the box's background image will be set to the image url with that index
box.style.backgroundImage = "url(" + imageUrls[index] + ")";
}
}
A quick understanding of the remainder operator
If you have a good understanding of what this reminder does, you can skip this section, if not this section is here to explain. The remainder operator %
is just like regular integer division except you get the remainder. So let's say we do 13%3
you'll get a remainder of 1
(Note: the operator uses integer division, unlike a calculator or the division operator /
that uses floating point division, it's similar to long division).
//remainder operator
console.log(13%3) //result: 1
//division operator
console.log(13/3) //result: 4.333...
Developers use the operator to check for even and odd numbers, wrapping or looping values, or even array cycling, which is what we're using it for!
Array Cycling
Now to make it so it switches images, we change the index variable and add it by one, however, after that we divide the sum with the remainder operator %
by the url array's length! Now the index will go up by 1 every time but as soon as it reaches the last index number of the array it'll loop back to 0. For example, if we had an image array with five values, we'd write index = (index + 1) % arrayLength
and right as it reaches the last index number it'll do the division 5%5
giving the result value of 0 to the index variable (because 5 divided by 5 gives a remainder of 0!). This method in programming is called Array Cycling, and it's best used with the remainder operator.
function ImageChange() {
let index = 0;
function newImage() {
//the box's background image will be set to the image url with that index
box.style.backgroundImage = "url(" + imageUrls[index] + ")";
//After some time the index will go up by one and pick the next url, but if the index is = to the imageUrls[] length then it wraps back around to the first index
index = (index + 1) % urlArrayLength;
}
}
Calling the functions!
Now all we have to do is call both functions! Inside our imageChange()
function we use setInterval()
to make our newImage()
function repeat every certain amount of time, we'll go with 200ms so write the code setInterval(NewImage, 200)
. After that all we have to do is call the imageChange()
function below!
function ImageChange() {
let index = 0;
function newImage() {
box.style.backgroundImage = "url(" + imageUrls[index] + ")";
index = (index + 1) % urlArrayLength;
}
//sets amount of time until the next index is picked
setInterval(newImage, 200);
}
ImageChange()
Conclusion
I'm sorry if this tutorial blog seemed long, I just wanted to be descriptive since I know some people who read my posts don't know a lot about Javascript. Hopefully, you remember this and use it for your later projects, such as landing pages or image galleries, It'll be cool to see more uniqueness in UI! If you have any questions or would like to say something in general just comment or email me, have a great day/night 👋.
Top comments (2)
A way simpler solution, thank you for sharing!!
Thanks Lens.
It’s a nice JS tutorial even if there’s a CSS alternative 👍