How to make this quick image change animation with JS!

#webdev #javascript #css #tutorial

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 👋.