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 get parent DIV width and set child DIV width

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    How to achieve the following design in css in jquery mobile

    ASP Listview. How to hide a table row using CSS

    How can I refer to an internal gradient definition inside an SVG sprite symbol?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to align elements so CSS fixed doesnt overlap on page load

    How to make all divs same height, based on text content?

    How can I make images stack on top of each other as web page scales down?

    How to create horizontal funnel like this? [closed]

    How do I apply a CSS to a clutter stage?

    How to apply a drop shadow on a triangle in CSS?

    How to position one element relative another using CSS/jQuery

    How to modify one element of a class without bothering the rest with the same CSS class?

    How to make a navigation bar have equal spacing?

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How to call apk font use CSS in android?

    How to generate the following control using html and css

    css: how to center box div element directly in center?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to set background-image to take remaining section of the page in semantic-ui

    How to prevent inherit for H1?

    CSS/JS: How do I copy the edge pixels and repeat them

    how to vertical align div elements using CSS?

    How to pause or delay animation using JavaScript/jquery

    how to set anchor tag text width using css?

    How to pause a Spinkit animation?

    How do I get a jquery function to only affect the child element of 'this'

    How to create a triangle in CSS3 using border-radius

    How to remove an elements active state when a sub element is clicked