Balloons rise up using Animate

by Avinashullal

HTML

https://forum.jquery.com/topic/how-to-let-more-balloons-rise-up-using-animate

CSS

body {
    background-image: url(http://localhost/pics/pretty-night-sky-418.jpg);
    background-size: cover;
}
.cloud {
    z-index: -1;
    background-image: url(http://localhost/pics/Lantern1.png);
    height: 37px;
    width: 32px;
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    line-height: 45px;
    font-size: 8px;
}

JavaScript

var easings = []
$.each($.easing, function (i, v) {
    if ($.isFunction(v)) easings.push(i)
})

    function randomEasing() {
        return easings[Math.floor(Math.random() * easings.length)]
    }

    function cloud(x, y, toX, toY, speed) {
        var easingUp = randomEasing()
        $('<span class="cloud">')
            .text(easingUp)
            .css({
            top: y,
            left: x
        })
            .animate({
            top: toX,
            left: toY
        }, {
            duration: speed || 10000,
            complete: function () {
                $(this).remove();
                cloud(x, y, toX, toY, speed)
            },
            specialEasing: {
                top: easingUp,
                height: randomEasing()
            }
        })
            .appendTo('body')
    }

    function randy(from, to) {
        return Math.floor(Math.random() * (to - from) + from)
    }

$(function () {
    var bottom = $(window).height() - 90
    var right = $(window).width() - 100
    for (var left = 20; left < right; left += 50) {
        cloud(left, bottom, -10, "-=" + randy(-200, 200), randy(12000, 24000))
    }
})