Last updated on December 6th, 2022 at 07:45 am
A very interesting script for all my visitors and a Christmas gift from MistoOnline. 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.
div id="animatedImage" style="position: relative;">
<img src="santa.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="santa.js"></script>
The div ID named animatedImage will basically have the santa image floating around.
Now let us take a look at the Javascript
//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.
Make sure to load this javascript after HTML
<div id="animatedImage" style="position: relative;">
<img src="santa.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="santa.js"></script>
If you would like to increase the speed in which Santa is dancing, modify this variable to higher value, for example 20 as shown
var santa_direction=20;
Variable santa_move is also similar and makes santa move according to this value in pixel
var santa_move=1000;
admin 