mercredi 3 janvier 2018

Making random animations on JQuery without collapsing with random number calcullation

I´m tring to make some images appear when you scroll and I want the animations they were random.

I have this:

$(window).scroll( function(){
    /* Check the location of each desired element */

    $('.conferencia').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( (bottom_of_window) > bottom_of_object ){

            $(this).animate({opacity:'1'},{duration:1500, queue: false});
            randomAnim($(this).find("img"));

        }

    });

});

I don´t know if this part it´s done correctly, the images don't appear exactly when bottom of window is on the bottom of object.

Now I have the function randomAnim() that selects form a animation pull:

function randomAnim(element){

    switch(Math.floor(Math.random() * 3) + 1) {
    case 1:
        element.css({'transform':'rotateX(360deg)'});
        break;
    case 2:
        element.css({'transform':'rotateZ(360deg)'});
        break;
    case 3:
        element.css({'transform':'rotateY(360deg)'});
        break;
    }
}

With this code the animation is not executing but if I place an alert(1) before every break; the animation works so I suppose that the problem is that Math.random calculates too much numbers and this collapses, but I'm not sure.




Aucun commentaire:

Enregistrer un commentaire