Question

Can anybody inspect which javascript they are using for the floating baloons? – http://themeforest.net/bundles/birthday

I was looking with the firebug for a while, but cant get which would be the right one. Thanks!

Answer 1

http://themeforest.net/bundles/javascripts/birthday_running.js

And here’s the horribly horrible if…else repeated coding horror being used.

$(".balloon").each(function () {
        var $this = $(this),
            width = $this.width(),
            height = $this.height(),
            rand = Math.random(),
            bgPosX,
            bgPosY = rand * (height),
            bgImg,
            animStep = 1 + (rand * 3),
            moveBalloon,
            animLoop;

        if ($this.is(".b1")) {
            bgPosX = Math.floor((width / 2)) - 620;
            bgImg = 1;
        } else if ($this.is(".b2")) {
            bgPosX = Math.floor((width / 2)) - 540;
            bgImg = 2;
        } else if ($this.is(".b3")) {
            bgPosX = Math.floor((width / 2)) - 590;
            bgImg = 3;
        } else if ($this.is(".b4")) {
            bgPosX = Math.floor((width / 2)) - 590;
            bgImg = 4;
        } else if ($this.is(".b5")) {
            bgPosX = Math.floor((width / 2)) + 470;
            bgImg = 2;
        } else if ($this.is(".b6")) {
            bgPosX = Math.floor((width / 2)) + 450;
            bgImg = 4;
        } else if ($this.is(".b7")) {
            bgPosX = Math.floor((width / 2)) + 510;
            bgImg = 1;
        } else if ($this.is(".b8")) {
            bgPosX = Math.floor((width / 2)) + 560;
            bgImg = 3;
        }

        $this.css({
            "background-position": bgPosX + "px " + bgPosY + "px",
            "background-image": "url(/images/bundles/birthday/balloon" + bgImg + ".png)"
        });

        moveBalloon = function () {
            if (bgPosY < -204) {
                bgPosY = $this.height();
            }
            bgPosY -= animStep;
            $this.css("background-position", bgPosX + "px " + bgPosY + "px");       
        };

        animLoop = function () {
            moveBalloon();
            window.requestAnimFrame(animLoop);
        };

        animLoop();

        $this.addClass("balloon");
    });