Hiệu ứng Ông già Nô En cho blog nhân dịp Giáng sinh

Giáng Sinh sẽ đến vào cuối tháng 12 này và chắc hẳn từ lúc này, bạn đã bắt đầu chuẩn bị trang trí cho blog của mình đẹp hơn, lạ mắt hơn để thu hút bạn đọc vào blog của bạn.

Có nhiều kiểu trang trí khác nhau cho blog nhân dịp Giáng Sinh. Sau đây là một kiểu trang trí độc đáo bằng một câu chúc Giáng sinh vui vẻ từ Ông già Nô En ngộ nghĩnh trượt khắp blog của bạn.

Xem Demo

Để làm được hiệu ứng này, bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </body> trong Template là được.

<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/AVvXsEgkW3wr2Cv81JvdwzcQvgHK7zGqx6uFfX9nb6hhG5Fl86uMLH1se2zwmo-S6mYOLIEAkScaMyft1FxoNnV0JskEr0B5hmyOR3rNKwYxNSqPRJOI9qVkAT2R9kRxvgioeXuAr0c6Ec0HQ0sT/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 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.