Автор

23 04.2013
Tiny Scrollbar: плагин для полосы прокрутки

Tiny Scrollbar: плагин для полосы прокрутки


 

Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин Tiny Scrollbar, который позволит создать собственную, плавную, полосу прокрутки с приятным интерфейсом. данный плагин позволяет реализовать как вертикальную так и горизонтальную полосу прокрутку. В данном уроке мы детально рассмотрим как подойти к данной реализации.

 

ДЕМО
ИСХОДНИКИ

 

Чтобы реализовать задуманное нам понадобится сам плагин Tiny Scrollbar, и небольшое знания общих правил. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо подключить все фреймворки:

<link type="text/css" rel="stylesheet" href="css/tinyscrollbar.css"/>

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

 

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

<div id="scrollbarY">
 <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
 <div class="viewport">
 <div class="overview">
 Желаемый текст
 </div>
 </div>
</div>

 

Все стили находятся в исходниках, при желании можно просмотреть и скопировать.

Шаг 2. JavaScript

Нам необходимо вызвать сам плагин, для этого следует разместить данный скрипт в удобном вам месте:

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('#scrollbarY').tinyscrollbar();
});
</script>

 

Плагин достаточно гибкий, по этому есть достаточно настроек для удобной реализации.

 

параметры: Описание Значение по умолчанию
axis Вертикальная или горизонтальная прокрутка ('x'/'y'). y
wheel Сколько пикселей перематывается одним движением колеса мыши. 40
scroll Включение/выключение прокрутки колесом мыши (true/false). true
size Размер полосы прокрутки. auto — в зависимости от контента, или задаем число в пикселях. 'auto'
sizethumb Размер ползунка. auto — в зависимости от контента, или задаем число в пикселях. 'auto'

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

11 04.2013
Tiny Scrollbar: плагин для полосы прокрутки

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


30 12.2015
Tiny Scrollbar: плагин для полосы прокрутки

Пост был написан мной 25.09.2011 и я его немного обновил и описал результаты этого неприятного факта. «Сегодня лопатил интернет и набрел на клон моего сайта. Дело в том, что этот домен (www.studio25kadr.ru) ранее принадлежал мне, но мне пришлось его поменять на существующий <a href="/">www.s-sd.ru</a>...


03 06.2017
Tiny Scrollbar: плагин для полосы прокрутки

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


15 03.2013
Tiny Scrollbar: плагин для полосы прокрутки

iLoad это скрипт галереи изображений для вашего сайта написанный на javascript. iLoad распространяется бесплатно для некоммерческих проектов при условии сохранения копирайтов и ссылок в файле. На этой странице вы всегда можете скачать свежую версию этого скрипта фото галереи и найдете информацию о том как работать с iLoad.

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close