Разработка - Анимация gif картинки для сайта на новый год

Делаем разметку HTML:

HTML:

<div id="animatedImage" style="position: relative;">
<img src="kartinka-0382.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="santa.js"></script>

Пишем код js для движения картинки слева на право:

JavaScript:

var santa_move=0;
var santa_direction=1;
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
var timerToggle=null;
animateBall();
function animateBall() { 
document.getElementById("animatedImage").style.left=santa_move + "px";
              //document.getElementById("animatedImage").style.top=santa_move + "px";
 santa_move+=santa_direction;
//400
if (santa_move>window.screen.width) {
    //santa_direction=-1;
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
santa_move=0;
}
 if (0>santa_move) { santa_direction=1; }
timerToggle=setTimeout(function() { animateBall(); },10);
}

Пишем код js для движения картинки с право на лево:

JavaScript:

var santa_move = window.screen.width;
var santa_direction = -1;
document.getElementById('animatedImage').style.top = "10px";
document.getElementById('animatedImage').style.left = santa_move + "px";
var timerToggle = null;
animateBall();

function animateBall() { 
    document.getElementById("animatedImage").style.left = santa_move + "px";
    santa_move += santa_direction;
    
    if (santa_move < 0) {
        santa_move = window.screen.width;
    }
    
    timerToggle = setTimeout(function() { animateBall(); }, 10);
}

Эти параметры отвечают за скорость анимации:

Код:

var santa_direction=20;
var santa_move=1000;

Получаем результат:

Реакции: hacker

Разработка Анимация gif картинки для сайта на новый год

Ещё ресурсы от baltun