Use Javascript to randomly select an image from a folder at the start of a css animation loop?

programming web dev
1

Please can someone help me? I’m new to coding at the tender age of 64 (trying to reinvent myself). I’m trying to create multi - animations of images “flying” around my webpage infinitely. Here is one of the loops. Every time the loop starts I would like the image to change randomly from an image folder. How do I code this in javascript triggered from this CSS with animationiteration?

#pic1{
    width: 320px;
    height: 577px;
    position: absolute;
    margin: 5px 15px 15px 15px;
    border-color: whitesmoke;
    border-style: groove;
    border-width: 3px;
    background-image: url(./images/myImage);
    
    animation-name: go1;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes go1  {
    from{transform: scale(0) translate(-800px,2000px)}
    to{transform: scale(1) translate(1900px,-500px)}
}

Many thanks.

2

Sounds like you’re halfway there. To change the image for each loop, you would use animationiteration. That would be the event that you’d listen for on #pic1 since that is the element being animated. From there you just need to assign it a random image.

First thing is, javascript can’t look into folders and know what images you have there - at least not javascript running in the browser. So instead, what you’re likely going to need to do is to manually write out the images that you want it to choose from in a list. Then from that list you can pull out a url randomly and apply it to the style of the animated element to override the original image. That would look something like…

let urls = [
    'url(./images/myImage)',
    'url(./images/myImage2)',
    'url(./images/myImage3)'
];
let pic1 = document.getElementById('pic1');
pic1.addEventListener('animationiteration', event => {
    let randIndex = Math.floor(Math.random() * urls.length);
    let randUrl = urls[randIndex];
    event.currentTarget.style.backgroundImage = randUrl;
});

Now, every time the animation loops, a new background image gets applied, randomly.

1 Like
3

Hi, Many thanks for your prompt response and input so far. I’m sorry but I failed to mention that this image folder will be changing many times a day and forever increasing in length. I need the code to be able to just look at the length of the file and then randomly select an image. Can this be done? All the images will be jpg only.

4

You’d have to have some server code to generate a list, and then load that list dynamically, or embed it in the HTML if you’re ok with it not picking up new images during the lifetime of the page. How you’d do that depends on your server configuration and what you have available to use there.

5

The concept is that on the user-side a notice is created and captured as a jpg using HTML2canvas. This is uploaded to the server to an image folder. From the time that this file is saved on the server it should be randomly accessible to various loops that are moving across the screen. If anyone clicks on the passing image it will come forward to a set position and display details and links pertaining to the image. If it can’t be done then I need to change my idea. I did not want to spend time updating a folder on a continual basis. Thanks