• 1757
  • 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 - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.

Можешь почитать и вот эту статейку "Открытие нового окна на js"

mistakes

Это тоже интересно

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

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

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