Как сделать свою полосу прокрутки для сайта
Современный веб-дизайн это важность каждого пикселя, ведь хорошо организованный проект это первый шаг к его успеху, не удивительно, что хорошие верстальщики ищут новые, необычные подходы к организации дизайна, вход за инновациями идут все детали сайта, навигация, контрастность, и даже полосы прокрутки в браузерах, именно о полосе прокрутки и как ее создать мы расскажем в данном уроке. Такой простой элемент дизайна поможет вам придать изюминку вашему сайту, ведь не каждый ресурс может похвастаться таким нововведением.
В уроке мы рассмотрим разные примеры к организации скроллинга. Такая прокрутка достаточно эффектно смотрится, ведь вы убираете стандартную прокрутку браузера, а вместо нее появляется маленький ползунок, который хорошо заметный. Для достижения такого эффекта нам понадобится небольшой скрипт jQuery-Rollbar, и так, приступим.
Шаг 1. HTML
Для начала мы подключим необходимые фреймворки к необходимой странице, где нам необходима такая прокрутка, данные скрипты необходимо разместить между тегами <head> и </head> в вашем документе, при этом не забывайте указывать правильный путь к скриптам и стилям.
1 2 3 4 5 |
<link rel="stylesheet" href="css/jquery.rollbar.css" /> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.rollbar.min.js"></script> |
Здесь нет ничего сложно, по этому детальнее останавливаться не будем. В демонстрации приведены несколько примеров, а именно прокрутка для контента, детальную разметку можно просмотреть в исходниках.
Теперь рассмотрим вызов самого плагина, для этого необходимо разместить код заключенный в теги <script> и </script>.
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $('#example1, #example2').rollbar({zIndex:80}); $('body').rollbar({zIndex:100}); }); </script> |
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 14.09.2012 в 12:21, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |