در این مقاله قصد داریم با استفاده از HTML5، CSS3 وJ Query یک نوع انیمیشن ایجاد کنیم.و حرکت اجسام در جهات مختلف را آموزش دهیم.

برای ایجاد این نوع  انیمیشن  از HTML5، CSS3 وJ Query استفاده میکنیم . در CSS3،  از  ()transform:scaleX  برای حرکت اجسام  در جهت های مختلف  استفاده میکنیم.

اشیای استفاده شده:

School

School Bus

KM Sign Board

در HTML،   از تگ <div> استفاده میکنیم. در این تگ  پنج عکس  ؛ مدرسه، تابلو KM  (سه تصویر) و اتوبوس مدرسه ،را قرار میدهیم.

 کد برای محو شدن مداوم  و محو شدن یک تصویر

    function fadeloop(el, timeout, timein, loop)  
    {  
        var $el = $(el),  
            intId, fn = function()  
        {  
                $el.fadeOut(timeout).fadeIn(timein);  
            };  
        fn();  
        if (loop)   
        {  
            intId = setInterval(fn, timeout + timein + 100);  
            return intId;  
        }  
        return false;  
    }  

 کد زیر را برای حرکت اتوبوس مدرسه از چپ به راست و راست به چپ است

    var distanceBall = 0;  
    var directionBall = 1;  
    document.getElementById('animatedImage').style.top = 10;  
    document.getElementById('animatedImage').style.left = 10;  
    var timerToggle = null;  
    animateBall();  
    var setting = 0;  
      
    function animateBall()   
    {  
        document.getElementById("animatedImage").style.right = (distanceBall - 100) + "px";  
        fadeloop('#christmastree', 8000, 7000, true);  
        distanceBall += directionBall;  
      
        if (distanceBall > window.screen.width - 180)  
        {  
            document.getElementById('animatedImage').style.top = 10;  
            document.getElementById('animatedImage').style.left = 10;  
            directionBall = -1;  
            document.getElementById('img1').className = 'left';  
      
        } else if (distanceBall < 0)  
        {  
            directionBall = 1;  
            document.getElementById('img1').className = 'right';  
      
      
        }  
      
      
        timerToggle = setTimeout(function()  
        {  
            animateBall();  
        }, 0.1);  
    }  

کد کامل  JS

    <script type="text/javascript">  
        function fadeloop(el, timeout, timein, loop)  
    {  
            var $el = $(el),  
                intId, fn = function()  
            {  
                    $el.fadeOut(timeout).fadeIn(timein);  
                };  
            fn();  
            if (loop)   
            {  
                intId = setInterval(fn, timeout + timein + 100);  
                return intId;  
            }  
            return false;  
        }  
        var distanceBall = 0;  
        var directionBall = 1;  
        document.getElementById('animatedImage').style.top = 10;  
        document.getElementById('animatedImage').style.left = 10;  
        var timerToggle = null;  
        animateBall();  
        var setting = 0;  
      
        function animateBall()   
    {  
            document.getElementById("animatedImage").style.right = (distanceBall - 100) + "px";  
            fadeloop('#christmastree', 8000, 7000, true);  
            distanceBall += directionBall;  
      
            if (distanceBall > window.screen.width - 180)  
            {  
                document.getElementById('animatedImage').style.top = 10;  
                document.getElementById('animatedImage').style.left = 10;  
                directionBall = -1;  
                document.getElementById('img1').className = 'left';  
      
            } else if (distanceBall < 0)  
            {  
                directionBall = 1;  
                document.getElementById('img1').className = 'right';  
      
      
            }  
      
      
            timerToggle = setTimeout(function()  
            {  
                animateBall();  
            }, 0.1);  
        }  
    </script>  

HTML

    <div>  
        <div class="topwrap1" style="position: fixed; width: 100%; bottom: 0;">  
            <div>  
                <div class="wrap">  
                    <div id="christmastree" style="position: fixed; padding-top: 550px; z-index: 99; left: 1px; bottom: 0;">  
                        <img id="img2" src="Images/school19.gif" alt="School" />  
                    </div>  
                    <div style="position: fixed; padding-top: 550px; z-index: 99; left: 1072px; bottom: 0;">  
                        <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
                    </div>  
                    <div style="position: fixed; padding-top: 550px; z-index: 99; left: 745px; bottom: 0;">  
                        <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
                    </div>  
                    <div style="position: fixed; padding-top: 550px; z-index: 99; left: 422px; bottom: 0;">  
                        <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
                    </div>  
                    <div id="animatedImage" style="position: fixed; padding-top: 550px; z-index: 99; left: 1px; bottom:0;">  
                        <div class="santa">  
                            <img id="img1" src="Images/school22.gif" alt="School Bus" style="height:58px;" />  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  

CSS

    #img2  
    {  
        height: 100 px;  
    }  
      
    .santa   
    {  
        background - size: 240 px;  
        background - position - y: 30 px;  
        padding - top: 0 px;  
        right: 0;  
        text - align: right;  
        bottom: 0;  
    }  
      
    .left  
    {  
        -ms - transform: scaleX(1); - moz - transform: scaleX(-1); - o - transform: scaleX(-1); - webkit - transform: scaleX(-1);  
        transform: scaleX(-1);  
        filter: FlipH; - ms - filter: "FlipH";  
    }  
      
    .right   
    {  
        -ms - transform: scaleX(-1); - moz - transform: scaleX(1); - o - transform: scaleX(1); - webkit - transform: scaleX(1);  
        transform: scaleX(1);  
        filter: FlipH; - ms - filter: "FlipH";  
    }  
      
    .topwrap1  
    {  
        color: #777;  
    padding: 0;  
    margin: 0;  
    height: 165px;  
    margin: auto auto;  
    vertical-align: middle;  
    }  
      
    .wrap   
    {  
    width: 95%;  
    min-width: 1150px;  
    max-width: 1200px;  
    margin: 0 auto;  
    text-align: left;  
    }  
      
    body  
    {  
    margin: 0;  
    }  

خروجی