How to animate through stacked images Javascript


Tags: javascript,html,css,css3,css-animations

Problem :

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';
        }
    }


Solution :

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;
}

    CSS Howto..

    How to add custom CSS class name in PHP?

    How to make tabs with html and css

    How do I maintain modularity with mixins?

    How to resize image on window resize in CSS?

    How can I float right two span tags on different lines?

    How to indicate there is more text to scroll?

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    CSS: How to center a bottom-fixed menu

    Outlines and Borders not showing at all in IE

    How to create a menu that rolls down? CSS

    How to create multi-column data entry form using CSS in Asp.Net?

    How to display html with css stylesheet in TextView?

    How do I create a menu that appears on hover?

    how to avoid firefox to add overlay color on image click?

    How to locate a pointed div element in css

    How to avoid overlapping HTML tags to highlight text

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to create an integrated row in the table?

    How to position an image to the right of a center aligned title with HTML & CSS

    How can override a CSS class to that nothing get applied?

    jQuery Slideshow in Chrome, Firefox, and Safari

    how to add a margin on both sides and center the text in a paragraph?

    How to trigger CSS “hover state” using Javascript? [duplicate]

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    How to scale an entire webpage down to ipad or phone size

    How would I call :parent for this tooltip?

    How can i display images horizontally using PHP and mysql?

    How do I achieve this animation using javascript/jquery? [closed]

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How to position
    element absolute from browser window?