Для того, чтобы сделать фон HTML 5 движущимся, можно воспользоваться следующим рецептом.
Сначала создадим HTML5 канву (или холст).
А затем с помощью не хитрых манипуляций с бесшовной картинкой создадим эффект бесконечного движения
<canvas id="canvas" height="310" width="600">
Your browser do not support HTML5
</canvas>
<script type="application/javascript">
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
// cоздаём объект для манипуляции с картинкой
img1 = new Image();
// указываем путь к картинке
img1.src = "allpics/1398564837.png";
// начальная координата картинки
var x1 = 0;
// начальная координата скопированной картинки = размеру картинки
var x2 = img1.width;
// шаг
var v = -1;
// cоздаём функцию, которую будет вызывать setInterval
function movebg() {
// инициализируем содержимое конвы
ctx.clearRect(0, 0, canvas.width, canvas.height);
// изменяем координаты в соответствии с шагом
x1+=v;
x2+=v;
// если первая координата стала больше картинки - инициализируем координаты и шаг
if (x1<(-1*img1.width)) {
x1 = 0;
x2 = img1.width;
v = -1;
}
// 2 раза помещаем в канву картинку со сдвигом равным x1 и x2
ctx.drawImage(img1,x1,0);
ctx.drawImage(img1,x2,0);
}
// запуск функции через 25 миллисекунд
setInterval(movebg, 25);
</script>
Пример можно посмотреть здесь : http://2l4u.ru/pubfiles/64/1360/
Сначала создадим HTML5 канву (или холст).
А затем с помощью не хитрых манипуляций с бесшовной картинкой создадим эффект бесконечного движения
<canvas id="canvas" height="310" width="600">
Your browser do not support HTML5
</canvas>
<script type="application/javascript">
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
// cоздаём объект для манипуляции с картинкой
img1 = new Image();
// указываем путь к картинке
img1.src = "allpics/1398564837.png";
// начальная координата картинки
var x1 = 0;
// начальная координата скопированной картинки = размеру картинки
var x2 = img1.width;
// шаг
var v = -1;
// cоздаём функцию, которую будет вызывать setInterval
function movebg() {
// инициализируем содержимое конвы
ctx.clearRect(0, 0, canvas.width, canvas.height);
// изменяем координаты в соответствии с шагом
x1+=v;
x2+=v;
// если первая координата стала больше картинки - инициализируем координаты и шаг
if (x1<(-1*img1.width)) {
x1 = 0;
x2 = img1.width;
v = -1;
}
// 2 раза помещаем в канву картинку со сдвигом равным x1 и x2
ctx.drawImage(img1,x1,0);
ctx.drawImage(img1,x2,0);
}
// запуск функции через 25 миллисекунд
setInterval(movebg, 25);
</script>
Пример можно посмотреть здесь : http://2l4u.ru/pubfiles/64/1360/