Ô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.

Đây là 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.


Kiểu 1
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPI7guKQSL1wMOpL8nYSpYeqMkGDrfFFyKu5Rv0cwuuEM3uPVe2fXHZXnfeP4xE5Z14wtfPwS4-tor4Qiud0aaWtiHDKnkMF6uKXytfcPEGkA4oMnLGj6SSnh71oP-r5SHhADXXjP7L2O8/s1600/papanoelnavidadreloj234.gif'/></a></span>
</div>
Kiểu2
DEMO
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/AVvXsEirz4rpn-l7zpAUkVxloJzcPHDAWNcuUjXzUIS-2EWXKg9jKkL2NXJekT-sXAEnh6KLb4xhFt62zcgQtQt8BEHCoqjF5DS9uFxfpqW0UNqPkuZfl5jjq1HOpw_BwUIrkgsKzo9eu9KBdl13/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>
Tham khảo:thuthuatblogger