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 Tạo chữ "Mery Chrismas"vớ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.
Style 1

Xem Demo 1

Để đư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://namkna.blogspot.com/2011/12/hieu-ung-ong-gia-no-en-cuoi-tuan-loc.html' target='_blank'><img src='http://img403.imageshack.us/img403/248/papanoelnavidadreloj234.gif'/></a></span>
</div>

Style2:

Xem Demo 2

Code

<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);
</script>
<span 
style="position:absolute;left:0;top:0;color:red;font-size:12px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;text-decoration:none;z-index:9999999999999"
 id="supertext"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzOL8GnpSzgXmnQLqh0HQHtBGYYRrZa0EJHNgGRttQUMPxKd86QSbVf4xdEqASPrh1Uqj3jTN6nuB1eMC70T0f0Tb6ugrDmbq3vPOmzhwoJTqseNV6JdlPS07ML71houUrKpyzBK0Q9eqM/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>

Và tất nhiên bạn có thể tìm những ảnh động về Giáng sinh khác TẠI ĐÂY hoặc trên Internet để lấy đường link và đặt vào dòng được đánh dấu màu đỏ trong đoạn code ở trên để tạo bản sắc riêng cho blog của bạn.
Chúc các bạn giáng sinh vui vẻ: