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

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


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

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



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

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


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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Эффект Параллакса на фоновом изображении. [Все движки]

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

Решено Эффект Параллакса на фоновом изображении. [Все движки]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 10:55

Всем приветик.

В данном туториале решил изложить инструкцию по установке на сайт Параллаксного эффекта фона. С помощью данного туториала можно установить на свой форум эффект параллакса на фон. Те кто не знаком с такой вещью как Параллакс, советую перед началом работы по установке почитать о нём. Данное улучшение подходит для всех движков, так что смело приступаем к работе.


Инструкция по созданию:

Топаем на нужный нам сайт, чтобы получить код Параллаксного фона:

http://web-features.net/

Выбираем вариант настройки Параллаксного фона:



На этом этапе идёт разделение на два варианта настройки фона. Для начала разберём более "сложный" вариант отображения Параллаксного фона, который включает в себя множественную или единичную комбинацию слоёв.  Idea



Первый вариант - Комбинация:

Первый вариант это комбинация двух и более слоёв фоновых изображений.

Спойлер:
К примеру сделаем фон в виде чёрных пчелиных сот, для этого нам понадобиться чёрный фон основа. На правой панели в палитре цветов можно выбрать цвет из палитры сайта или вставить свой код цвета в спец - поле:



После настройки основного фона, переходим к созданию второго - дополнительного фонового изображения, которое должно будет состоять из графического изображения. На странице управления настройками фона, в правом нижнем углу ищем мини кнопку, нажимая на которое мы увидим всплывающее окно. Во всплывающем окне, нам нужно выбрать фон из коллекции сайта или же вставить ссылку на своё фоновое изображение. К примеру мы возьмём фоновое изображение из коллекции фона:









В адресной строке изображения появиться ссылка на фоновое изображение, после этого нажимаем на кнопку Ок.

Фоновое изображение готово и мы можем приступить к следующему этапу, собственно говоря в настройке Параллакса. Теперь нам нужно нажать на две кнопочки в левой панели:



И это даст нам возможность настроить скорость и другие настройки Параллакса:



Когда закончите настройку, можете получить код для вставки на сайт:





Копируем код для вставки на блокнот, затем идём на свой форум.

Внимание: при создании комбинированного параллакса, можно загружать 3 - и более изображений.


Второй вариант - Стандартный Параллакс:

Второй вариант более лёгкий. Так как там нам понадобиться лишь одно изображение.

Спойлер:
Топаем на нужный нам сайт, чтобы получить код Параллаксного фона:
http://web-features.net/

Выбираем эффект Параллакса на фон. Далее нажимаем на кнопку "загрузить изображение":




Теперь ставим ссылку на изображение в строку для загрузки:




Когда изображение загружено, можно подключить Параллакс:



В левой панели появятся настройки, с которыми стоит поработать:



Там можно выбрать какой именно эффект будет у Параллакса. т.е проще говоря при движении курсором как именно будет сдвигаться фон, вертикально или горизонтально, или же всё вместе. Также там есть и другие настройки, которые вам стоит проверить. Ну а как закончите, можно получить код для вставки на форум:






Копируем код для вставки на блокнот, затем идём на свой форум.


Внимание: если вы используете большие изображения в стиле пейзажей и т.д, тогда учтите что такие изображения должны быть огромными. Можно использовать и бесшовные изображения, которые можно использовать без проблем.    Exclamation





Этап второй - Установка в виджеты [Все движки].

Получив код нам нужно его установить на форуме. Но для начала нужно отключить стандартный фон, чтобы не возникало сбоев:

Панель Администратора - Оформление - Картинки и цвета - Управление картинками.
Фоновое изображение: ставим пустышку.

Затем топаем сюда:

Панель Администратора - Модули - Портал и Виджеты - Виджеты форума.

Создаём новый персональный виджет с отключенным шаблоном, а в содержимое виджета вставляем код для вставки. В моём варианте код будет таким:

Код:
 <!— ========== web-weatures.net Paralax Background ================= -->
<script type="text/javascript">
var wf_pbb_object = [
{bc:"rgb(0, 0, 0)"},
{img:"http://web-features.net/patterns/16.png", mm:true, ms:true, mms:1, mss:10, mmd:1, mso:"v", msd:1, im:"pattern", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:1, sr:false, sb:false, isr:false, isb:false}
];
</script>
<script type="text/javascript" src="http://web-features.net/api/wf.pbb.api.js"></script>
<!— ========== web-weatures.net Paralax Background ================= -->

Сохраняем виджет, затем ставим его в левую или правую колонку.  Exclamation




Этап второй - Установка в Шаблоны [phpBB2, punBB]

На форумах с движками punBB и phpBB2 возможно вставить код в шаблоны. Ниже приведена мини инструкция:


Отображение на всех страницах:

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_footer_end.
Перед тегом </body>, ставим код Параллаксного фона. (!)

Сохраняем и опубликовываем шаблон.   plus


Отображение лишь в определённых шаблонах:

Топаем в управление шаблонами:
Панель Администратора - Оформление - Шаблоны - Общие настройки .

В начало определённых шаблонов можно добавить код фона:

№1 - viewtopic_body
№2 - viewcomments_body
№3 - profile_view_body
№4 - portal_body

Можно и в другие особые шаблоны добавлять, но выше указанные те, в которых лучше всего делать это улучшение.  korsar


Желаю всем удачи в продвижении и улучшении ваших форумов.


С уважением автор данного туториала Миша Вейк aka Сказочник Зазеркалья.

Сказочник Зазеркалья
Дизайнер
Дизайнер

Пол : Мужчина
Сообщения : 3672
Возраст : 25
Место обитания : Морг.
Карма : Без предупреждений
Благодарности : 687
Регистрация : 2012-11-16

http://help.forum2x2.ru

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

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

- Похожие темы

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