Web Tutorial: A Christmas Animation (Part 3/4)

For this next segment of the web tutorial, the jolly old man himself will make an appearance. We'll use this graphic, and show him floating across the sky. Here's the image we'll be using.

santa.png

Add this to your HTML. Here, within the main_wrapper div, we have a div with an id of santa_wrapper. Within this div there are two other divs - sleigh_wrapper and ho_wrapper.

        <div id="main_wrapper">
            <div id="spinright" class="snow_wrapper">

            </div>

            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>
            <div class="house"></div>

            <div id="spinleft" class="snow_wrapper">
          
            </div>

            <div id="santa_wrapper">
                <div id="sleigh_wrapper">
  
                </div>  
                <div id="ho_wrapper">
                    HO
                </div>              
            </div>
        </div>

Now, let's style the divs. Add this to your CSS.

            #main_wrapper
            {
                margin-left:auto;
                margin-right:auto;
                margin-top:5%;
                margin-bottom:200px;
                width:400px;
                height:400px;
                background-color:#000044;
                position:relative;
                overflow:hidden;
            }  

            #santa_wrapper
            {
                width:250px;
                height:50px;
                position:absolute;
                z-index:0;
                margin-top:50px;
                margin-left:450px;
                border: 1px solid #FF0000;
            }

            #sleigh_wrapper
            {
                width:100px;
                height:50px;
                background-size:contain;
                background-image:url(santa.png);
                background-repeat:no-repeat;
                background-position:left top;
                position:relative;
                float:left;
                border: 1px solid #FF0000;
            }

            #ho_wrapper
            {
                position:relative;
                float:left;
                color:#000000;
                font-weight:bold;
                font-family:arial;
                width:30px;
                height:30px;
                border: 1px solid #FF0000;
            }

            .house
            {
                background-color:#000000;
                width:50px;
                height:300px;
                border:0px solid #FFFFFF;
                float:left;
                margin-top:400px;
                position:relative;
                z-index:10;
                transition:margin-top 2s;
                -webkit-transition:margin-top 2s;
            }

The margin-left property of santa_wrapper has been set to 450px and this means that Santa will be out of sight when the animation starts. sleigh_wrapper has its background set to the image I showed you at the beginning of this blogpost. And the ho_wrapper div is set to stick to the back of sleigh_wrapper with float:left.

I've also set all the border properties to these three classes to red, so you can see clearly.

Set the main_wrapper div's overflow property back to visible and you'll see how things are set up.

            #main_wrapper
            {
                margin-left:auto;
                margin-right:auto;
                margin-top:5%;
                margin-bottom:200px;
                width:400px;
                height:400px;
                background-color:#000044;
                position:relative;
                overflow:visible;
            }

Ho Ho ho

Let's wrangle the guffawing of the old man first. Add this to the CSS.

            #ho_wrapper
            {
                position:relative;
                float:left;
                color:#000000;
                font-weight:bold;
                font-family:arial;
                width:30px;
                height:30px;
            }

            .ho1
            {
                margin-top:10px;
                margin-left:20px;
                font-size:25px;
            }

            .ho2
            {
                margin-top:10px;
                margin-left:50px;
                font-size:20px;
            }

            .ho3
            {
                margin-top:10px;
                margin-left:80px;
                font-size:16px;
            }

Then modify your HTML, by styling the ho_wrapper div with the ho1 CSS class.

            <div id="santa_wrapper">
                <div id="sleigh_wrapper">
  
                </div>  
                <div id="ho_wrapper" class="ho1">
                    HO
                </div>              
            </div>

Next, modify your JavaScript by adding the hohoho() function. Then attach the hohoho() function to a timer function to kick things off.

            function raisehouses()
            {
                var houses=document.getElementsByClassName("house");

                for (var i=0;i<houses.length;i++)
                {
                    createwindows(houses[i]);
                    houses[i].style.marginTop=generaterandomno(100,200)+"px";
                }
            }

            var santatimer=setTimeout(function() {hohoho(1);},1500);

            function hohoho(varho)
            {
                var ho=document.getElementById("ho_wrapper");
                ho.className="ho" + varho;
                if (varho==4)
                {
                    santatimer=setTimeout(function() {hohoho(1);},1000);
                    ho.innerHTML="";
                }
                else
                {
                    santatimer=setTimeout(function() {hohoho(varho+1);},200);
                    ho.innerHTML="HO";
                }
            }

            function play()
            {
                snowflakes(100);
                raisehouses();
            }

The hohoho() function accepts a parameter varvalue which determines what class the ho_wrapper div is styled by. If varvalue is "1", ho_wrapper is styled by ho1, and then the function calls itself, this time with a argument of "2". And so on...

This is called a recursive function. Look it up! (https://en.wikipedia.org/wiki/Recursion_%28computer_science%29)

Long story short, your Santa should look like this now, with "HO HO HO" trailing out of the back of his sleigh.

Now let's move the sleigh. Alter your CSS class santa_wrapper with this keyframe information. This basically means that santa_wrapper starts at the position margin-left:450px, and floats across the screen to end up at position margin-left:-350px. The animation has been set at 5 seconds, and will be delayed by 2 seconds (to give the buildings at the beginning of the animation time to "spring up".)

            #santa_wrapper
            {
                width:250px;
                height:50px;
                position:absolute;
                z-index:0;
                margin-top:50px;
                margin-left:450px;
                border: 1px solid #FF0000;
                animation-name: movesanta;
                animation-duration: 5s;
                animation-delay: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                -webkit-animation-name: movesanta;
                -webkit-animation-duration: 5s;
                -webkit-animation-delay: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
            }

            @-webkit-keyframes movesanta {
                from {margin-left:450px;}
                to {margin-left:-350px;}
            }

            @keyframes movesanta {
                from {margin-left:450px;}
                to {margin-left:-350px;}
            }

Do you see the animation clearly?

Now set the overflow property of the main_wrapper div back to hidden.

            #main_wrapper
            {
                margin-left:auto;
                margin-right:auto;
                margin-top:5%;
                margin-bottom:200px;
                width:400px;
                height:400px;
                background-color:#000044;
                position:relative;
                overflow:hidden;
            }

And reset the borders of your santa_wrapper, sleigh_wrapper and ho_wrapper divs.

            #santa_wrapper
            {
                width:250px;
                height:50px;
                position:absolute;
                z-index:0;
                margin-top:50px;
                margin-left:450px;
                border: 0px solid #FF0000;
                animation-name: movesanta;
                animation-duration: 5s;
                animation-delay: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                -webkit-animation-name: movesanta;
                -webkit-animation-duration: 5s;
                -webkit-animation-delay: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
            }

            @-webkit-keyframes movesanta {
                from {margin-left:450px;}
                to {margin-left:-350px;}
            }

            @keyframes movesanta {
                from {margin-left:450px;}
                to {margin-left:-350px;}
            }

            #sleigh_wrapper
            {
                width:100px;
                height:50px;
                background-size:contain;
                background-image:url(santa.png);
                background-repeat:no-repeat;
                background-position:left top;
                position:relative;
                float:left;
                border: 0px solid #FF0000;
            }

            #ho_wrapper
            {
                position:relative;
                float:left;
                color:#000000;
                font-weight:bold;
                font-family:arial;
                width:30px;
                height:30px;
                border: 0px solid #FF0000;
            }

Now Santa periodically floats across the screen, laughing like a boss!

Next

The final touches.