Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 19 - сентября Интерфейс
2802 - 0
  • Автор: Dmitry Dark5ider
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Оригинальная скользящая панель - Portamento , где основное функционирование завязана на использовании Jquery плагина Portamento. Сам плагин написан программистом Крисом Нобелем, главная особенность - это динамически передвигающийся по мере прокрутки слой с вашим содержимым.

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

Установка проста и выполняется за пару шагов:
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2. Раскладываем содержимое по папкам

portamento.js (или portamento-min.js) -> templates/YOURTEMPLATE/js/

3. Открываем main.tpl, в head вставляем

Код:
<script src="{tpl_url}/js/portamento.js"></script>

4. Добавим CSS стили. Portamento оборачивает панель в элемент с ID = portamento_container.
#portamento_container обеспечивает правильное положение панели, устанавливая ей свойство position:absolute.
Панель получает класс fixed, когда она скользит. Поэтому для нее надо установить свойство position:fixed.
Например:
Код:
#portamento_container {
float:right;
position:relative;
}

#portamento_container #example {
float:none;
position:absolute;
}

#portamento_container #example.fixed {
position:fixed;
}
5. Настроить панель.
Для начала нам нужно понять в каких пределах будет "ездить" наш слой (панель).

Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side
в main.tpl вставляем код
Код:
<script>
$('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>

Portamento можно настроить за счет входных данных:
wrapper - элемент необходимый, чтобы ограничивать перемещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент .
gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.
disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.

Можешь почитать и вот эту статейку "Заработать на бирже Миралинкс"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3459 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [3]
  • Гости: [2]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.455сек
  • Потребление памяти: 5.144 Mb 
  •   яндекс.ћетрика