Улучшенная полоса прокрутки для вашего сайта

liimebar_thumb

JQuery плагин, который удаляет браузерные по умолчанию полосы прокрутки и заменяет его улучшенными, современными полосами, которые будут действительно впечатлять ваших посетителей и  улучшат ваш сайт. Прокрутки сделаны на чистом CSS, что делает плагин  легко настраиваемым и вы сможете его быстро настроить.

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

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

Шаг 1. HTML

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.liimeBar.packed.js"></script>

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

Шаг 2.

Теперь рассмотрим вызов самого плагина, для этого необходимо разместить код заключенный в теги<script> и </script>.

<script type="text/javascript">
		$(function(){
			$('body').liimeBar();
		});
</script>

 


Комментарии: