Hiệu ứng Ông già Nô En cưỡi tuần lộc nhân dịp Giáng sinh

Thời điểm Giáng sinh ngày càng đến gần và hơn bao giờ hết, mỗi blogger chúng ta đều có ý tưởng trang trí cho blog của mình thật đẹp hơn cho dịp đặc biệt này.

Ở bài viết trước tôi đã giới thiệu hiệu ứng Ông già Nô Envới câu chúc Merry Christmas di chuyển vòng quanh blog thật ngộ nghĩnh. Hôm nay tôi tiếp tục giới thiệu một hiệu ứng khác, về cơ bản khá giống với hiệu ứng trước, ở đây chỉ điều chỉnh một chút, hiệu ứng với Ông già Nô En cưỡi tuần lộc di chuyển từ góc trái blog rồi sau đó bỗng nhiên biến mất.

Xem Demo

Để đưa hiệu ứng này vào blogspot của bạn, chỉ cần đưa toàn bộ đoạn code sau đây vào bất kỳ một bài viết nào đó ở chế độ Edit HTML, hoặc có thể đặt vào một tiện ích HTML/JavaScript bất kỳ.

<div id='closeit' style='border: 0 !important;'>
<script type='text/javascript'> 

var textSpeed = 2;
var contentWidth;
var contentHeight;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';

function initializeText() 
{
if (typeof window.innerWidth != 'undefined')
{
xMax = window.innerWidth;
yMax = window.innerHeight;
}
else 
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
xMax = document.documentElement.clientWidth;
yMax = document.documentElement.clientHeight;
}
else
{
xMax = document.getElementsByTagName('body')[0].clientWidth;
yMax = document.getElementsByTagName('body')[0].clientHeight;
}

var supertext = document.getElementById('supertext');
contentWidth = supertext.offsetWidth;
contentHeight = supertext.offsetHeight;

setTimeout('moveText()', 400);
}

function moveText() 
{
var supertext = document.getElementById('supertext');

calculatePosition();
supertext.style.left = xPos + document.body.scrollLeft + "px";
supertext.style.top = yPos + document.body.scrollTop + "px";
animatetext = setTimeout('moveText()', 20);
}

function calculatePosition() 
{
if (xDir == "right") 
{
if (xPos > (xMax - contentWidth - textSpeed)) 
{ 
xDir = "left";
}
}
else 
if (xDir == "left") 
{
if (xPos < (0 + textSpeed)) 
{
xDir = "right";
}
}
if (yDir == "down") 
{
if (yPos > (yMax - contentHeight - textSpeed)) 
{
yDir = "up";
}
}
else 
if (yDir == "up") 
{
if (yPos < (0 + textSpeed)) 
{
yDir = "down";
}
}
if (xDir == "right") 
{
xPos = xPos + textSpeed;
}
else 
if (xDir == "left") 
{
xPos = xPos - textSpeed;
}
else 
{
xPos = xPos;
}
if (yDir == "down") 
{
yPos = yPos + textSpeed;
}
else 
if (yDir == "up") 
{
yPos = yPos - textSpeed;
}
else 
{
yPos = yPos;
}
}

setTimeout('initializeText()', 500);

function closebandera(){ 
div = document.getElementById('closeit');

div.style.display='none';
}
setTimeout(closebandera, 7500); 
</script>
<span id='supertext' style='position:absolute;left:0;top:0;color:red;text-align:center;z-index:9999999999999'>MERRY CHRISTMAS!!!<BR></BR><a href='http://huynh-nhat-ha.blogspot.com/2010/12/santa-claus-with-reindeer-effect.html' target='_blank'><img src='http://img403.imageshack.us/img403/248/papanoelnavidadreloj234.gif'/></a></span>
</div>