Animation

by Neil Daley

HTML

<div id='position'>position</div>
<img src="http://res.freestockphotos.biz/originals/17/17428-the-east-side-of-chagulak-island-or.jpg" />
<div class='plane'>
    <img id='plane' src="http://res.freestockphotos.biz/originals/7/7020-illustration-of-an-airplane-with-a-blank-smoke-cloud-or.png" width='300' height='100' />
</div>

CSS

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}
.plane {
    position: absolute;
    top: 100px;
    left:50px;
    width: 100px;
    height:100px;
    }
.wall {
    position: absolute;
    top:150px;
    left:100px;
    width: 450px;
    height:450px;
}

JavaScript

var timerInterval = 100;

var timer = window.setInterval(function() { PlaneTimer() }, 
                              timerInterval);  



function PlaneTimer()
{
  moveplane($('.plane'));   
}

function moveplane(obj)
{
    var left = obj.offset().left;
    var top = obj.offset().top;
    var moveDuration = 50;
    $('#position').html('left:' + left  + ' top:' + top);
    
    if ((left <= 850)&&(top<=200))
    {
        obj.addClass('flipped');
       obj.animate({ "left": "+=30px" }, moveDuration );
        return;
    }

    if ((left >= 100)&&(top<=450))
    {
        obj.removeClass('flipped');
       obj.animate({ "top": "+=30px" }, moveDuration );
        return;
    }
    if ((left >= 50)&&(top>=450))
    {
        obj.addClass('flipped');
       obj.animate({ "left": "-=30px" }, moveDuration );
        return;
    }
    if ((left<=50)&&(top>=100))
    {
        obj.addClass('flipped');
       obj.animate({ "top": "-=30px" }, moveDuration );
    }
}