Двигающийся фон в шапке - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы оформления форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 2.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

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

#1 Пользователь не на сайте   Niaeri ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 24-Август 14
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 20 Октябрь 2014 - 20:06

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

Сообщение изменено: Niaeri (20 Октябрь 2014 - 20:07)

0

#2 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 723
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 20 Октябрь 2014 - 20:55

Просмотреть сообщениеNiaeri сказал(а):

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

https://www.google.r...channel=suggest
0

#3 Пользователь не на сайте   Niaeri ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 24-Август 14
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 20 Октябрь 2014 - 22:54

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

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


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

#4 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 723
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 21 Октябрь 2014 - 03:32

Просмотреть сообщениеNiaeri сказал(а):

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

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

Просмотреть сообщениеNiaeri сказал(а):

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

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

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

#5 Пользователь не на сайте   Niaeri ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 24-Август 14
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 21 Октябрь 2014 - 09:43

http://hp.ainodor.ru
Стиль Animate

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

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

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

#6 Пользователь не на сайте   newbie ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 2 166
  • Регистрация: 26-Октябрь 11
  • Репутация: 814
  • IPB version:I have no IPB
 

Отправлено 21 Октябрь 2014 - 12:21

Просмотреть сообщениеNiaeri сказал(а):

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

Просмотреть сообщениеNiaeri сказал(а):

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

Сперва Вам нужно добавить к селектору свойства анимации.
-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; }
}

0

#7 Пользователь не на сайте   Lesovsky ответил: »

 
 
  • Advanced
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Specialist
  • Сообщений: 325
  • Регистрация: 18-Июль 10
  • Репутация: 64
  • Откуда:Russia
  • IPB version:3.4.x
 

Отправлено 21 Октябрь 2014 - 13:54

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

spritely.net/documentation


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

#8 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 723
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 21 Октябрь 2014 - 14:35

Да ничего там особенно на 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>

1

#9 Пользователь не на сайте   Niaeri ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 11
  • Регистрация: 24-Август 14
  • Репутация: 0
  • IPB version:3.4.x
 

Отправлено 21 Октябрь 2014 - 19:35

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

#10 Пользователь не на сайте   newbie ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 2 166
  • Регистрация: 26-Октябрь 11
  • Репутация: 814
  • IPB version:I have no IPB
 

Отправлено 22 Октябрь 2014 - 07:22

Просмотреть сообщениеsiv1987 сказал(а):

Да ничего там особенно на jquery нет, свободно можно портировать на prototype поменяв один селектор.
Не только селектор.
$('#branding').css("background-position",  + offset + "px 0");
Не является корректной записью в prototype.
Правильнее будет так
        $('branding').setStyle({"background-position": + offset + "px 0"});

0

Сообщить об этой теме:


Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна