Balloons Animation

User Rating: / 0
PoorBest 

Hi, in this tutorial i will present you how you animate a ballons, obviously you can put any picture, gif animations etc, is your choise! It's about some picture wich slide by top to bottom!

For first stept createa html page, and in the head section create css styleand link with javascript:

<style type="text/css">
            #wrapper { position: relative; width: 950px; height: 600px; margin: 0 auto;}
            #balloon1 { position: absolute; top: 0;  left: 0; }
            #balloon2 { position: absolute; top: 0; left: 0; }
            #balloon3 { position: absolute; top: 0;  left: 0; }
            #balloon4 { position: absolute; top: 0; left: 0; }
            #balloon5 { position: absolute; top: 0; left: 0; }               
</style>

<script type="text/javascript" src="balloon.js"></script>

        <script type="text/javascript">           
            window.onload = function(){
                var oBalloon1 = new balloon('balloon1');
                var oBalloon2 = new balloon('balloon2');
                var oBalloon3 = new balloon('balloon3');
                var oBalloon4 = new balloon('balloon4');
                var oBalloon5 = new balloon('balloon5');               
            }
</script>

In the body section create linkk between image and html page:

<div id="wrapper">
            <img src="balloon.png" id="balloon1"/>
            <img src="balloon2.png" id="balloon2"/>
            <img src="balloon3.png" id="balloon3"/>
            <img src="balloon4.png" id="balloon4"/>
            <img src="balloon5.png" id="balloon5"/>           
</div>

Now create a new jacascript document, nemed balloon.js and copy the script wich make move the balloons:

var balloon = function(sID){   
    this.oWrapper = document.getElementById("wrapper");
   
    this.oBalloon = {
        obj: document.getElementById(sID),
        x: Math.random() * this.oWrapper.clientWidth,
        y: Math.random() * 150,
        strength: {
            x: 0.03 + Math.random()/10,
            y: 0.9 + Math.random()/2
        },
        amplifier: Math.random()*25,
        angle: 0
    }
   
    this.setTimer();
};

balloon.prototype.setTimer = function(){
    this.move();
   
    var oSelf = this;
    setTimeout(function(){ oSelf.setTimer() }, 20);
};

balloon.prototype.move = function(){
    var oBalloon = this.oBalloon;
   
    oBalloon.y += oBalloon.strength.y;
   
    if(oBalloon.y  + 125 > this.oWrapper.clientHeight ){
        oBalloon.y = 0;
        oBalloon.obj.style.top = 0;
    }

    oBalloon.angle += oBalloon.strength.x;
    oBalloon.obj.style.top = oBalloon.y + "px";
    oBalloon.obj.style.left = oBalloon.x + oBalloon.amplifier * Math.sin(oBalloon.angle)+"px";
};

That's all, bye!