Скролящийся блок
Очень часто в интернете встречаются сайты с большим количеством информации на одной странице, из-за чего приходится усердно работать колесиком мышки что бы вернутся к навигации или иному полезному блоку. Для облегчения путешествия пользователя по таким страницам часто прибегают к эффекту скролящегося блока. Для ясности представляю вам первый пример.
Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.
Требования для работы плагина:
HTML/CSS
Как всегда свои плагины я стараюсь сделать наиболее универсальными, чем меньше они зависят от HTML/CSS кода – тем лучше, поэтому для данного плагина определенных требований при верстке нет!
javaScript:
<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.
Скачать плагин
5 Коментариев to Скролящийся блок
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Уже давно знаю об этом плагине, красиво но на мой взгляд бесполезно если смотреть на сторону юзабилити сайта, если вы или ваша студия делала какой то сайт с данной реализацией, хотелось бы увидеть.
Алексей, если не сложно выделяйте ссылки на примеры как-то более существенно, а то не видно, спасибо!
> Руслан
Заверяю Вас примеров множество.
Плавающие меню, рекламные блоки, подсказки и т.п.
Сослатся на реальные проекты не могу, т.к. восновном это комерчиские проекты фирмы в которой я работаю, поэтому ссылки на эти работы давать не имею права.
Простите заранее немного критики.
Лично мне немного напрягает глаза моментальный скроллинг. Думаю если запускать скролл с небольшой задержкой после прокрутки, примерно в 500мс, будет не так раздражающе.
Но в целом идеальный вариант для размещения рекламы, кушать то чтото кодеру надо :)
В Firefox 3.6.3 не работает нифига. Это не дело