Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Проблемы после перехода на ios 10
автор Иван Иванов Сегодня в 23:01

» Счетчик
автор Иван Иванов Сегодня в 16:12

» Лого для helpblog2x2.home-forum.com
автор Dana Domirani Сегодня в 15:53

» Оцените мой форум
автор Magliga Сегодня в 14:54

» Отредактировано N раз
автор Иван Иванов Сегодня в 14:39

» Обновление Мобильной версии форума
автор Отличник ГО Сегодня в 14:15

» Разное для новичков
автор Иван Иванов Сегодня в 12:43

» Как сделать почту
автор Иван Иванов Сегодня в 11:36

» Не отображается рамка аватаров
автор Ринкате Сегодня в 8:09

» Сбой после синхронизации форума
автор Eclipse6 Сегодня в 6:36

Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

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

Предыдущая тема Следующая тема Перейти вниз

Решено Анимированный фон

Сообщение автор Альберт Вескер в Вс 5 Июн - 19:21

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

Спойлер:
Спойлер:

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



Последний раз редактировалось: Альберт Вескер (Ср 8 Июн - 10:28), всего редактировалось 1 раз(а)

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Вс 5 Июн - 19:31

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

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Вт 7 Июн - 18:30

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

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis в Вт 7 Июн - 21:54

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

Irbis
 
 

Пол : Мужчина
Сообщения : 608
Возраст : 30
Место обитания : Россия
Настроение : Отлыниваю от работы
Карма : Без предупреждений
Благодарности : 215
Регистрация : 2008-02-10

http://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор NaYami в Вт 7 Июн - 22:41

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

NaYami
 
 

Сообщения : 140
Карма : Без предупреждений
Благодарности : 1
Регистрация : 2011-02-24

http://teneoris.forum2x2.org 382525916

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis в Ср 8 Июн - 7: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>

Irbis
 
 

Пол : Мужчина
Сообщения : 608
Возраст : 30
Место обитания : Россия
Настроение : Отлыниваю от работы
Карма : Без предупреждений
Благодарности : 215
Регистрация : 2008-02-10

http://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Ср 8 Июн - 9:17

Не работает.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Ср 8 Июн - 9: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>


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21916
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Ср 8 Июн - 9:42

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

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Ср 8 Июн - 9: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');
}


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21916
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Ср 8 Июн - 10:09

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

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Ср 8 Июн - 10:14

В шаблонах:
Код:
<!-- комментарий -->
В CSS
Код:
/* комментарий */



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21916
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер в Ср 8 Июн - 10:28

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

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения