CODEWITHSUNDEEP
javascripthtmlcssanimation
joasisk
joasisk

Reputation: 61

js image fall into position

Hi I'm trying to make a simple animation with JS. I have my page which is a gallery of my photos. Each image is in span and that span has class="img". What you can see on my page now is the, what i want, end position of images. What I want to do is to get each image to fall from above to that end position when the page finishes loading.

I know that i can get all the images into the array by calling 

var document.getElementsByClassName("img");
but how can I make the animation? I know how to change the postion of element to new coordinates but how to make fall from top to set position in CSS?

Upvotes: 0

Views: 1120

Answers (1)

Silkster
Silkster

Reputation: 2210

Do you mean something like this:

http://jsfiddle.net/silkster/58dRA/

CSS:

.pw {
    position: relative;
}
.left, .middle, .right {
    float: left;
    width: 294px;
    min-height: 1500px;
    overflow: hidden;
}
.img {
    position: relative;
    top: -2000px;

    /* Set our transitions up. */
    -webkit-transition: top 1.25s;
    -moz-transition: top 1.25s;
    transition: top 1.25s;
}

JavaScript:

jQuery.fn.reverse = [].reverse;

$(function () {
    var delay = 500;
    $('.left, .middle, .right').each(function () {
        var imgs = $('.img').reverse(),
            iLen = imgs.length;

        imgs.each(function () {
            var c = $(this), 
                h = c.height();

            delay += 100;
            setTimeout(function () {
                c.css('top', '0px');
            }, delay);

        });
    });
});

Upvotes: 1

Related Questions