Скролящийся блок

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

Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.

Требования для работы плагина:

HTML/CSS

Как всегда свои плагины я стараюсь сделать наиболее универсальными, чем меньше они зависят от HTML/CSS кода – тем лучше, поэтому для данного плагина определенных требований при верстке нет!

javaScript:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.movingBlock.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#sidebar').movingBlock({
            holder:'div.wrapper',
            topDif:0,
            bottomDif:0,
            toEl:false,
            cssTop:'marginTop',
            duration:350   
        });
    });
</script>

В роли главного объекта $(‘#sidebar’) выступает непосредственно скролящийся элемент, а теперь детальнее о параметрах:

  • holder – селектор обертки (родителя) скроляшегося элемента, главный параметр, т.к. указывает в каком элементе будет скролиться блок;
  • topDif – отступ элемента от верхней части экрана;
  • bottomDif – отступ элемента от нижней части экрана;
  • toEl – если вы хотите что бы блок скролился в обертке до определенного элемента, то в данном праметре вам нужно указать селектор этого элемента;
  • cssTop – изменяющееся свойство при скроле (marginTop или top);
  • duration – время анимации.

Для наглядности хочу продемонстрировать еще пару примеров: пример 2, пример 3.

Скачать плагин

Tags: , ,

Воскресенье, Январь 10th, 2010 JS Plugins, JavaScript, jQuery

5 Коментариев to Скролящийся блок

  • Уже давно знаю об этом плагине, красиво но на мой взгляд бесполезно если смотреть на сторону юзабилити сайта, если вы или ваша студия делала какой то сайт с данной реализацией, хотелось бы увидеть.

  • Max:

    Алексей, если не сложно выделяйте ссылки на примеры как-то более существенно, а то не видно, спасибо!

  • > Руслан
    Заверяю Вас примеров множество.
    Плавающие меню, рекламные блоки, подсказки и т.п.
    Сослатся на реальные проекты не могу, т.к. восновном это комерчиские проекты фирмы в которой я работаю, поэтому ссылки на эти работы давать не имею права.

  • Простите заранее немного критики.
    Лично мне немного напрягает глаза моментальный скроллинг. Думаю если запускать скролл с небольшой задержкой после прокрутки, примерно в 500мс, будет не так раздражающе.
    Но в целом идеальный вариант для размещения рекламы, кушать то чтото кодеру надо :)

  • В Firefox 3.6.3 не работает нифига. Это не дело

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы