Home

Add Christmas Cheer to Your Website

The examples below show ways to add Christmas cheer to your website. Each example shows one way to accomplish the programming task. It is not the only way, and it may even be the best way, but it accomplishes the goal. The examples use picture files, JavaScript, and the style property to create each Christmas Decoration.

Some people believe you should wait until after Thanksgiving to decorate for Christmas, but if you have your own website, you can choose how long your decorations should be displayed.

The example below alternates between two picture files. One picture is colored with a dark shade of red and the next is colored with a brighter shade of red to represent the lights in an off and an on state.

Flashing Lights

Lights Off

Lights On

Lights Flashing

The style properties below are added to a div named RedLights to create the look of the image.

style="height:70px;display:inline-block;background-image:url('/img/RL0.png');background-repeat:repeat;"

The style property, background-repeat repeats the picture allowing the lights to span the entire length of the div. For this affect to work, the picture file must have the same amount of green representing the wire on each side of the picture file.

The height of the div must be set high enough to display the full picture file, and in order to set the height, display:inline-block must be added to the style of the div.

The JavaScript below alternates between each picture every one second. The number 1000 in the setInterval function represent 1000 milliseconds, and 1000 milliseconds is equal to one second.

The variable nVal is declared to switch between the two pictures. In this example there are two picture files. One is named RL0.png, representing the lights being turned off, and the second is named RL1.png representing the lights being turned on. The initial value for nVal is set to zero. The initial picture in the div is set to RL0.png. The variable nVal is increased by 1, and the nVal variable is converted to a string and concatenated with RL and .png to create the name of the picture. When the variable is equal to 2 it is reset to 0. Adding the number to the picture file name decreases the amount of coding needed to create the flashing affect.

        <script>
            var nVal = 0            
            setInterval(animatePage, 1000);

            function animatePage() 
            {        
                nVal = nVal + 1; //increase nVal by 1
                if (nVal == 2)
                {
                    nVal = 0; //reset nVal to 0
                }
            }
            var imgHold = "/img/RL" + nVal.toString() + ".png"; //dynamically create picture file name
            document.getElementById("RedLights").style.backgroundImage = "url(" + imgHold + ")"; // set the background image of the div
       </script>
        

The flashing lights below are created with the same code however, the picture files contain multi-colored lights instead of just red lights.

Lights Off

Lights On

I created the Christmas below with the Windows Paint Application by drawing a green triangle and a brown rectangle. Then I copied the top of the lights I drew in the string of lights pictures and pasted them into the Christmas Tree.

The code is the same as the code above however, the height property was increased, and the background-repeat property was changed to no-repeat.

style="height:450px;display:inline-block;background-image:url('/img/ChristmasTreeOff.png');background-repeat:no-repeat;"

Picture 1

Picture 2

Picture 1 and Picture 2 rotating each second

There are many ways to make text flash, and one way is to use the JavaScript below to change the color of the text from red to dark red.

The HTML code for the div is shown below.

<div style="font-size:36px;font-family:Verdana;font-style:italic;font-weight:bold;color:darkred;">Merry Christmas</div>
        

        <script>
        var nVal = 0;        
        setInterval(animatePage, 1000);

        function animatePage()
        {
            nVal = nVal + 1; //increase nVal by 1
            if (nVal == 2)
            {
                nVal = 0; //reset nVal to 0 
            }      
            if (nVal == 1)
            {            
                document.getElementById("MerryChristmas").style.color = "darkred";
            }
            if (nVal == 0)
            {
                document.getElementById("MerryChristmas").style.color = "red";
            }
        }
       </script>
        

The style property float:left moves the div controls to the same line. The border-radius property creates the circle with the help of the height and width. To make a circle, the height and width must be equal, and the height and width must be larger than the font size.

Below is the HTML Code used to display the letters with a circle background.

<div style="color:silver;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">J</div>
<div style="color:silver;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">O</div>
<div style="color:silver;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">Y</div>
        

        <script>
        var nVal = 0;        
        setInterval(animatePage, 1000);

        function animatePage()
        {
            nVal = nVal + 1; //increase nVal by 1
            if (nVal == 2)
            {
                nVal = 0; //reset nVal to 0 
            }      
            if (nVal == 1)
            {            
                document.getElementById("joy1").style.color = "silver";
                document.getElementById("joy2").style.color = "silver";
                document.getElementById("joy3").style.color = "silver";
            }
            if (nVal == 0)
            {
                document.getElementById("joy1").style.color = "red";
                document.getElementById("joy2").style.color = "red";
                document.getElementById("joy3").style.color = "red";
            }
        }
        </script>
        

<div style="color:white;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">P</div>
<div style="color:white;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">E</div>
<div style="color:white;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">A</div>
<div style="color:white;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">C</div>
<div style="color:white;background-color:red;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;">E</div>
        

In the example below, the sleigh is animated to move across the screen, and jump back to the beginning of the div element. The animation is comprised of four picture files. All picture files are the same width and height. The sleigh is moved to a different position in each picture, and when you loop through the picture files, you get the result below.

Below is the HTML for the div

<div id="santa" style="width:100%;height:200px;clear:both;background-image:url('/img/Santa1.jpg');background-repeat:no-repeat;"></div>
        

Below is the script to loop through the four picture files.

        <script>
        var nSanta = 0;      
        setInterval(animatePage, 1000);
        nSanta = nSanta + 1;
        if (nSanta == 5)
        {
            nSanta = 1;
        }
        function animatePage()
        {
            nVal = nVal + 1; //increase nVal by 1
            if (nVal == 2)
            {
                nVal = 0; //reset nVal to 0 
            }      
            imgHold = "/img/Santa" + nSanta.toString() + ".jpg"; //get picture file name
            document.getElementById("santa").style.backgroundImage = "url(" + imgHold + ")"; //set picture file
        }
        </script>
        

The above options are sure to supply Christmas cheer to your website and are fairly easy to implement.

Click here for an animation example using a Bootstrap Carousel.