Ông già Noel đánh xe tuần lộc đi phát quà 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-Santa Claus reindeer christmas di chuyển theo các hướng trong blogspot tạo cảm giác vui mắt và không khí giáng sinh.

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

<style>/*<![CDATA[*/
.santa{z-index:600;cursor:pointer;-webkit-animation:FlyingSanta 38s infinite linear;-moz-animation:FlyingSanta 38s infinite linear;-ms-animation:FlyingSanta 38s infinite linear;-o-animation:FlyingSanta 38s infinite linear;animation:FlyingSanta 38s infinite linear;bottom:0%;left:0%;position:absolute}
@keyframes FlyingSanta{25%{bottom:80%;left:85%;transform:rotateY(0deg)}26%{transform:rotateY(180deg)}50%{bottom:60%;left:0%;transform:rotateY(180deg)}51%{transform:rotateY(0deg)}75%{bottom:40%;left:85%;transform:rotateY(0deg)}76%{bottom:40%;left:85%;transform:rotateY(180deg)}99%{transform:rotateY(180deg)}}
/*]]>*/</style>
<script>/*<![CDATA[*/
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 id='supertext' style='color: red; font-family: &quot;arial&quot;; font-size: 12px; font-style: normal; font-weight: normal; left: 0; position: absolute; text-align: center; text-decoration: none; top: 0; z-index: 9999999999999;'><img alt='Santa Be Watchin' class='santa' height='47' src='https://3.bp.blogspot.com/-eCA22LmqKTY/Ua31KDmrLqI/AAAAAAAAbC0/3dfAxmapaUI/s1600/papanoelnavidadreloj234.gif' weidth='137'/>MERRY CHRISTMAS!!!</span>

Bạn có thể tìm và thay ảnh gif khác nếu có ảnh đặc sắc và phù hợp, ví dụ dưới đây là một ảnh khác.

DEMO

Link ảnh

https://lh3.googleusercontent.com/-5kjy9Bv6Gco/ZXhgXLm5NeI/AAAAAAAAEmY/Hzu2syGfA_UPv9ZNdWo6A7lmmPBhNEOaACNcBGAsYHQ/s0/santas.320x172.gif

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://2.bp.blogspot.com/-8YMaIJf2a_w/Ua32KOn5JBI/AAAAAAAAbDE/YVgYhXOEti0/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>

Tham khảo:thuthuatblogger

MERRY CHRISTMAS!!!