Back To School Theme/Animation by JQuery Animation

In this blog you will see a Back to School Theme/Animation by JQuery Animation.

For creating this type of animation we are going to use HTML5, CSS3 and J Query. In CSS3, I am using transform:scaleX() for moving object from one direction to other.

Used Objects

• School
• School Bus
• KM Sign Board

In HTML, I am using one container <div>. In that container I am going to place five images including School, KM Sign Board (Three Images) and School Bus.

Here's the code for continuously fade in and fade out of an Image

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;
}

Creating the following code for moving school bus from left to right and right to left

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);
}

Complete JS Code

<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;
}

Final Output



Guys, herewith I am attaching souRce code. Keep exploring!