Анимированный фон

Здравствуйте, уважаемые!
Помогите сделать анимированный фон как здесь в примере: http://ruseller.com/lessons/les1127/demos.html
Единственное что хотелось, так это оставить свой текущий фон и добавить этот анимированный эффект движения. Вот картинки из этого примера, которые создают такой эффект движения:

Спойлер:

Здесь у вас картинки на белом фоне не будут видны. Их нужно будет сохранять.
Очень хочется такой эффект на свой форум.
Адрес моего форума: http://re-generations.forum2x2.com/

Вот здесь есть информация от том как это сделать. Но для этого нужно использовать исходники, а как использовать исходники я не знаю, поэтому и прошу помощи. http://ruseller.com/lessons.php?rub=32&id=1127

Вопрос всё ещё актуален, хотелось бы получить помощь.

автор Irbis Июнь 7th 2011, 21:54

А в чем собссна сложности? Копируйте скрипт да и все...

автор NaYami Июнь 7th 2011, 22:41

что и куда пихать?..

автор Irbis Июнь 8th 2011, 07:23

В CSS:

Код:: body { background: url('http://img822.imageshack.us/img822/5903/gradienta.jpg'); }

В футер:

Код:: <script type="text/javascript"> $(document).ready( function() { var backgroundheight = 2000; var backgroundheight_two = 1000; offset = Math.round(Math.floor(Math.random()* 2001)); offset2 = Math.round(Math.floor(Math.random()* 1001)); function scrollbackground() { offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1; $('body').css("background-position", "50% " + offset + "px"); setTimeout(function() { scrollbackground(); }, 100 ); } scrollbackground(); }); </script>

Не работает.

автор **Dana Domirani** Июнь 8th 2011, 09:24

Работает. Попробуйте добавить вот так и в виджет на главной странице -

Код:: <script type="text/javascript"> jQuery(document).ready( function() { var backgroundheight = 2000; var backgroundheight_two = 1000; offset = Math.round(Math.floor(Math.random()* 2001)); offset2 = Math.round(Math.floor(Math.random()* 1001)); function scrollbackground() { offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1; jQuery('body').css("background-position", "50% " + offset + "px"); setTimeout(function() { scrollbackground(); }, 100 ); } scrollbackground(); }); </script>

Либо в overall_header (Верхняя часть страницы) перед </head>

Вставил, работает.
Но в указанном примере в самом начале - 2 картинки. Одна движется быстрее, другая медленнее. Но сейчас у меня одна картинка, которая двигается, а мне хотелось бы сделать так: одна картинка - мой текущий фон, вторая (поверх) - движущиеся прозрачные кружки (медленно), третья - движущиеся прозрачные кружки (быстрее). Вот.
Ну или хотя бы две картинки - мой фон и движущиеся кружки.

автор **Dana Domirani** Июнь 8th 2011, 09:59

Так тоже можно.
Измените в скрипте:

Код:: jQuery('body').css("background-position", "50% " + offset + "px");

на

Код:: jQuery('.body2').css("background-position", "50% " + offset + "px");

В шаблоне overall_header (Верхняя часть страницы) впишите еще один див с классом body2 - сразу внутри body. Т.е. добавьте:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="body2">

и

</table>
</div>
</body>
</html>

А в CSS добавьте скользящий прозрачный фон:

Код:: body { margin: 0; background: #000 url('исходный фон'); } .body2 { background: transparent url('http://i24.servimg.com/u/f24/16/34/07/89/overla10.png'); }

Отлично. Я всё понял и всё работает.
И да, как ставить комментарии в шаблонах, что бы если что, я смог разобраться где и что я делал?
Хотя обычно комментарии ставятся так? - //комментарий -?

автор **Dana Domirani** Июнь 8th 2011, 10:14

В шаблонах:

Код::

В CSS

Код:: /* комментарий */

Спасибо.
Вопрос темы решён.

Анимированный фон

Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон

Re: Анимированный фон