Ô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
Ông già Nô En với xe tuần lộc nhân dịp Giáng sinh

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEC6KmAHtHYnar8hUrsYeX1d8Mrkbw6dGEFPQeRYI2ihRD4IPvmKOVChDiTsvmDBP1vATaM-gEA0BKoyOyrKpdnr9IzGRgYTHtNgxEl2OqpRLVex4au9Mq7JPOV5Zoukbu7RNd2Y22han/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.
Ông già Nô En cưỡi tuần lộc nhân dịp Giáng sinh

DEMO

Link ảnh
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87Y05Ow3uL3Kb6UmQOcu3G9wkKFF9Tx90SSGoPI1mscTKr1MROwO6qhJGxt7olDKk9SLLHTM0r3PMuKKLUrnuss465iqNRQZnxjrPVo2AMZn4cMzG8le1IPPk-5JWdMWmqeUFRMk7OY7b/s0/santas.320x172.gif
Kiểu2
Ông già Nô En cưỡi tuần lộc nhân dịp Giáng sinh


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/AVvXsEjGLxJp1xvcINpsJVmlcvw6VAKWrzOeBstCwLwCBhEYqpmvollSIE0iyUDDy4yIsV5K80ew-I1QHfE835EHyO0iZ0A5XQniivlMPaEyRMSCKnoo97wy6lLr_IFka7uqxoyl8j7JPxKwuuHv/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>
Tham khảo:thuthuatblogger

Santa Be WatchinMERRY CHRISTMAS!!!
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji