CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Startec
Startec

Reputation: 13206

How to animate through stacked images Javascript

I have a series of images that are "stacked" inside of div. I want to transition (crossfade) between these images (not using jQuery), with CSS transitions. What I do not know how to do is endlessly transition between the images. The images are added dynamically through a JSON feed, and they will continue to be added so the number of images in the divs is not set.

I was thinking an approach using the z-index to bring images on top of each other (and then animate the opacity and other properties) but if I want to animate through 4 photos, I am not sure how to keep track of z-index and the opacity settings, to know which is showing. Here is what I came up with so far, but I would be interested in how people cycle through a potentially unknown number of images and keep track of what is "shown". Basically, I have a simple CSS Transition set on the images right now and am animating by adding and removing classes and I want to be able to create a cycle that goes through the images, changing the z-index and some property, and then later send it to the back of the group.

HTML

//Example div (on my page there are many of these)
<div class="imageHolder">
    <div class="imageContent">
       <img class="homeImages" src="media/test.png">
       <img class="homeImages" src="media/test1.png">
       <img class="homeImages" src="media/test2.png">
    </div>
</div>

CSS

 div.imageHolder {
        float: left;
        position: relative;
        width: 32.9%;
        padding-bottom: 18.6%;
        margin-right: .1em;
    }

    div.imageContent {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    div img {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1
    }

    div img.newImage {
        z-index: 2;
        opacity: 0;
    }

    div img.live {
        z-index: 3;
        opacity: 1;
        transition: opacity 1s ease-in;
    }

Javascript

    function select() {
        var x = Math.floor(Math.random() * divs.length);
        if(divs[x].children.length > 1) {
            var live = document.querySelector('div img.live');
            var old = document.querySelector('div img.newImage');
            live.className = 'newImage';
            old.className += ' live';
        }
    }

Upvotes: 1

Views: 1358

Answers (1)

Juank
Juank

Reputation: 6196

You need js, at least to keep track of which is the current image and add a class that triggers the css transition.

If I understand correctly, you've almost got it. Try this

function select() {
    var x = Math.floor(Math.random() * divs.length),
        current = document.querySelector('.imageContent img.live'),
        newOne = document.querySelectorAll('.imageContent img')[x];

    current.className = ''; // clear the .live class
    newOne.className = 'live'; 
    // this triggers the css transition

    setTimeout(select, 1000); // after the css transition ends, do this again
}

And change the css to

div img {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* moved .newImage styles here as a default */
    z-index: 2;
    opacity: 0;
}

Upvotes: 1

Related Questions