Home » javascript » Animated Santa Claus Using Javascript This Christmas

Animated Santa Claus Using Javascript This Christmas

by admin · December 4, 2012

Rating: 6.4/10 (9 votes cast)

Animated Santa Claus Using Javascript This Christmas

A very interesting script for all my visitors and a Christmas gift from mistonline. An animated Santa Claus that dance along your web page. This is very simple script, no complex code added. All you have to do is copy paste the below HTML & JS code and edit your HTML’s accordingly.

The first part is to get the image. I have a gif image here if you need you can take it from our website or download it from an external site. Any GIF images will do.
Download Santa

The HTML Code looks like this. Save this on to your index page or any other according to your convenience.

<script type="text/javascript" src="santa.js"></script>
<div id="animatedImage" style="position: relative;">
 <img src="santa.gif" alt="animatedImage" />
</div>

Now the Javascript Part

//Santa animated by http://www.mistonline.in
//Visit us for more tutorials and scripts on Javascript,PHP,Mysql,Ajax etc.,
//If you like our code please dont remove our website name from this page. Thanks in advance.
var santa_move=0; 
var santa_direction=1; 
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
var timerToggle=null; 
animateBall();
function animateBall() {   
document.getElementById("animatedImage").style.left=santa_move + "px";
              //document.getElementById("animatedImage").style.top=santa_move + "px";
 santa_move+=santa_direction;
//400
if (santa_move>window.screen.width) { 
	//santa_direction=-1; 
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
santa_move=0;
}
 if (0>santa_move) { santa_direction=1; }
timerToggle=setTimeout(function() { animateBall(); },10);
}

Save this as santa.js and run the HTML to see Santa Claus dancing on your webpage.

Merry Christmas My Friends

DEMO

Rating: 6.4/10 (9 votes cast)

Animated Santa Claus Using Javascript This Christmas, 6.4 out of 10 based on 9 ratings