Как циклично вращать фоновое изображение методом svg или html5?

Question

[exehtml]

Есть обычная html-страница, есть у неё div:

div.bg{
width:100%;
height:100%;
position:fixed;
background:url('bg.png') center center no-repeat fixed;
}

Сама картинка bg.png пусть будет символичным солнышком 2000х2000px. Нам надо сделать так, чтобы это солнышко вращалось на фоне страницы. Сейчас это реализовано так:

$(document).ready(function(){
	rotateBg()
});
function rotateBg() {
	v0 = 0;
	function animate() {
		if (v0 >= 360){v0 = 0;}
		v0 = v0 + 0.2;
		$('.beaming').css({'transform': 'rotate(' + v0 + 'deg)'});
	}
	intervalID = setInterval(animate, 40);
}

В результате фон div'а статично относится к оному, а вот сам div вращается со скоростью 0.2 градуса в 40 миллисекунд.

Мне нужно сделать так, чтобы див был статичным/неподвижным, а вращалось его фоновое изображение. Причем чтобы это был не gif (которые не поддерживает альфа-каналов и будет оч много весить), а что-то, созданное при помощи технологии svg или же html5.

Заранее спасибо.

Answer 1

[_ _]

Бэкграунд вращать не получится, вращаейте div с изображением через transition без JS, там есть возможность организовать цикличную анимацию.
Вот затравка

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Comments

[exehtml]

да, я знаю эту методу. Этот вариант рассматривался, но был отвергнут из-за кроссбраузерности.

[exehtml]

и да, не animation, а transition :)

[Евгений Петров]

@exehtml именно animation, вам всё верно написали.

Answer 2

[Евгений Петров]

Вам для цикличности больше подходит animation.

Если формировать что-то сложное с помощью html, то это, скорее всего, будет canvas. Это будет элемент и схема понятна — он с position:absolute, а блок с контентом position:relative и с повышением положения в stacking context за счёт z-index:1.

Если это будет svg, то можно делать как элементом (и подход тот же), так и фоновым изображением (data:uri).

Comments

[exehtml]

вариант svg с фоновым изображением интересен. Можно поподробнее?

[Евгений Петров]

jsfiddle.net/petroveg/nrL3ecnh/1

[exehtml]

@Petroveg очень круто. А как использовать изображение с сервера, а не выполненное средствами .svg?

[Евгений Петров]

codepen.io/cleric/pen/DqCrm

[exehtml]

так звездочки же все равно нарисованы. Я имею в виду картинку по URL, растровое изображение.

[Евгений Петров]

А какая разница? Я не понимаю вопрос. Вы вольны загружать картинку как отдельный элемент (img), использовать в виде фонового изображения, или даже растеризовать в canvas (это извращение я оставлю для других месье :).

А в каком виде картинка — непосредственно в base64 (utf-8) прямо в коде, или ссылка на бинарный файл — неважно.

У вас был интерес к использованию SBG as is в коде. Я привёл пример использования прямой вставки (inline SVG), фоновое изображение в UTF-8 (data-uri), а также ссылку на готовый SVG файл. Неужели у вас есть трудности с использованием обычного растрового изображения?

Если вас волнует указание формата UTF-8, то перекодируйте в base64 (таких кодеров/декодеров полно в сети) и указывайте base64 вместо utf8.

[exehtml]

понял, спасибо. Буду возиться. Проблема в том, что с base64 и svg раньше не работал

[Евгений Петров]

Я обновил код codepen.io/cleric/pen/DqCrm — показал работу с псевдообластью.

Полностью удовлетворить ваше требование по вращению фона возможно, если загнать animation в SVG. Как будто-бы анимированный GIF:) Но я пока не разбирался с этим вопросом.

[exehtml]

т.е. применить анимацию к svg-объекту, который установлен в качестве фона?

[Евгений Петров]

@exehtml да, непосредственно внутри SVG применять animation к тому же path.

[Евгений Петров]

@exehtml обновите codepen.io/cleric/pen/DqCrm. Первый же блок — SVG со встроенной анимацией в качестве фоновой картинки. Предупреждаю сразу — в IE будет тупо статично стоять.

[exehtml]

увы, про ИЕшники я не имею права забывать :(

[Евгений Петров]

@exehtml кто мешает ставить для IE другую картинку? Мне вас основам разработки учить?))

[exehtml]

ну да, точно) просто я с svg не работал, поэтому еще не догнал что и как)