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

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

Шаг 1. HTML

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

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

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

Вот и все. Готово!

Читайте также: