Двигающийся фон в шапке

[Niaeri 0]

На многих скинах я видела такую прелесть, как плывущая картинка в шапке. Я честно пыталась найти сама где это прописывалось бы, но так ни к чему прийти и не могу.

Собственно, вот тут мне надо сделать так, что бы тыковки, котлы и прочие (это одна повторяющаяся картинка) плаавно двигались слева на право, или наоборот - не важно.

Изменено 20 октября 2014 пользователем Niaeri

[siv1987 2628]

На многих скинах я видела такую прелесть, как плывущая картинка в шапке

https://www.google.ru/search?client=opera&rls=ru&q=css+%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest

[Niaeri 0]

Нет, в гугле я искала. Я не понимаю где именно это прописывать, потому что в ipb.styles в branding написано только

 

#branding {
background: #000 url("{style_images_url}/banner_bg.jpg") repeat-x top;
height: 130px;

 

И я не могу найти то место в уже существующем стиле с такой анимацией, где она прописана

[siv1987 2628]

Я не понимаю где именно это прописывать

Что именно "это"?

 

И я не могу найти то место в уже существующем стиле с такой анимацией, где она прописана

В каком "существующем стиле"? А может быть там и не css анимация, а анимированная гифка.

 

ПС.

Скажите, вот нахрена приводить этот скриншот из первого поста, когда по нему никакой анимации не видно, и не понятно какие части и как они двигаются. Хотите показать пример - показывайте адресом на рабочем сайте.

[Niaeri 0]

http://hp.ainodor.ru

Стиль Animate

 

Из того, что я разобралась ("это"), где-то должно быть написано примерно следующее

 

@keyframes anim {
from {background-position:0px 0px;}
to {background-position: ***px 0px;}
}

и вместо *** - скорее всего, бесконечность, или, в любом случае, очень много, потому что я "исследованием элемента" дошла до очень больших цифр в этом значении

Но я не понимаю где именно

[newbie 1723]

Стиль Animate

В данном стиле анимация сделана посредством jquery.

 

Из того, что я разобралась ("это"), где-то должно быть написано примерно следующее

Сперва Вам нужно добавить к селектору свойства анимации.

-webkit-animation: brandingMove 40s linear infinite;
animation: brandingMove 40s linear infinite;

 

Далее уже описать саму анимацию

@-webkit-keyframes brandingMove {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}

@keyframes brandingMove {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}

[Lesovsky 175]

Я использую этот плагин для jQuery:

 

spritely.net/documentation

 

Из минусов что нужно подключать библиотеку jQuery и сам плагин что утяжелит, но зато кроссбраузерно.

[siv1987 2628]

Да ничего там особенно на jquery нет, свободно можно портировать на prototype поменяв один селектор.

 

var backgroundpos = 0;
var offset = 1;
function scrollbackground() {
	offset = (offset < 1) ? offset + (backgroundpos - 1) : offset - 1;
  		$('#branding').css("background-position",  + offset + "px 0");
  		setTimeout(function() {
		scrollbackground();
		}, 100
	);
  	}
	scrollbackground();

На CSS

 

<style>
@-webkit-keyframes brandingMove {
   from { background-position: 100% 0; }
   to { background-position: 0 0; }
}
@keyframes brandingMove {
   from { background-position: 100% 0; }
   to { background-position: 0 0; }
}

#branding{
-webkit-animation: brandingMove 40s linear infinite;
animation: brandingMove 40s linear infinite;
}
</style>

[Niaeri 0]

Спасибо огромное, все работает

[newbie 1723]

Да ничего там особенно на jquery нет, свободно можно портировать на prototype поменяв один селектор.

Не только селектор.

$('#branding').css("background-position",  + offset + "px 0");

Не является корректной записью в prototype.

Правильнее будет так

        $('branding').setStyle({"background-position": + offset + "px 0"});