How to Add Santa Riding Reindeer [Christmas jQuery Animation]

Christmas is back with boom, people have started decorating x-mas trees with lights & bells and the spirit of festive mood has already begun. Why don’t you decorate your website this xmas with Christmas jQuery animation. This xmas animation pack comes with Santa riding reindeer jquery animation, snowfall and animated xmas tree. Here is how to add these xmas objects to your website.
Also read:

1. Multi Device Website Mockup Generator – Create Website Mockup for Apple Devices
2. How to Create PHP AJAX Contact Form with Google reCaptcha

How to Add Santa Riding Reindeer jQuery Animation?

1. Open your website homepage with the code editor like Notepad++ or Atom
2. Add the following HTML line inside the body tag of your webpage
[html] <div class="santa"><img src="images/christmas-sled-source_ulp.gif" alt="" /></div>
[/html]
3. Add the following CSS inside your stylesheet
[css] .santa {
position: fixed;
bottom: 10px;
right: -500px;
}
[/css]
4. Add christmas-sled-source_ulp.gif inside “images” folder (available in the source code zip file)
5. Add the jQuery library in the header section (ignore if already added)
[html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
[/html]
6. Add the following jQuery lines just before the closing body tag
[java] <script type="text/javascript">
$(document).ready(function() {
var windowWidth = $(document).width();
var santa = $(‘.santa’);
santa_right_pos = windowWidth + santa.width();
santa.right = santa_right_pos;
function movesanta(){
santa.animate({right : windowWidth +  santa.width()},15000, function(){
santa.css("right","-500px");
setTimeout(function(){
movesanta();
},10000);
});
}
movesanta();
});
</script>
[/java]

That’s it, you have just added Santa riding reindeer jquery animation to your webpage, now refresh your webpage to view the Santa jquey animation.

How to Add Christmas Snowfall Effect to Your Webpage?

There is a nice jquery plugin available to add snowfall effect to your webpage, here is how to add the snowfall effect.

1. Download and add snowfall.jquery.min.js inside “js” folder (available in the source code zip file)
2. Add the snowfall.jquery.min.js file in the header section
[html] <script src="js/snowfall.jquery.min.js"></script>
[/html]
3. Now add the following script inside document.ready function
[java] $(document).snowfall({flakeCount : 100, maxSpeed : 5, maxSize : 5});
[/java]

That’s it, you have just added the snowfall effect to your webpage. Finally lets add xmas tree on your webpage.

How to Add Xmas Tree on Your Webpage?

1. Add Animated_Xmas-tree-animation.gif inside “images” folder (available in the source code zip file)
2. Add the following CSS in your stylesheet
[css] .xmas-tree {
position: fixed;
bottom: -20px;
right: 5px;
}
[/css]
3. Include the following HTML line inside the body tag
[html] <div class="xmas-tree"><img src="images/Animated_Xmas-tree-animation.gif" alt=""></div>
[/html]

That’s all, you have added Xmas tree on your webpage

It would be nice if you give us a backlink as credit, if you use this code in your website.

• CSS
• HTML
• jQuery