Простые решения по работе с прокруткой и скроллбарами

С информацией
Только заголовки

Индикатор прокрутки страницы

Индикатор, показывающий глубину прокрутки в процентах и в виде линии.

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

Читать далее

Анимация элементов при прокрутке — WOW.js

Скрипт WOW.js для анимации элементов при прокрутке страницы вниз.

Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.

Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript

Читать далее

Вертикальная прокрутка fakeScroll

Замена стандартной вертикальной полосы прокрутки на пользовательскую скриптом fakeScroll

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

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

fakeScroll — очень легкий скрипт (4.1кб) для стилизации вертикальной полосы прокрутки без использования библиотек. А только это в основном и требуется, например, для оформления ограниченного по высоте блока с большим количеством информации.

Читать далее

Параллакс эффект simpleParallax

Эффект параллакса накладываемый на теги изображений, а не на фон

simpleParallax — это простой и легкий JavaScript без каких-либо дополнительных библиотек. Он применяет эффект параллакса непосредственно к тегам изображения, а не к фону.

Читать далее

Фиксация сайдбара при прокрутке вверх и вниз

Плагин Theia Sticky Sidebar для фиксации боковой колонки при прокрутке страницы

Зафиксировать боковую колонку сайта можно двумя способами:

1 Зафиксировать весь сайдбар вверху и внизу страницы. Когда заканчивается колонка, она останавливается, а при прокрутке вверх опять листается до конца. Данный вариант рассмотрен в этой заметке.

2 Зафиксировать определенный блок сайдбара. Когда при прокрутке вниз до определенного блока, он фиксируется и постоянно остается видимым. Этот вариант рассмотрим в будущем.

Читать далее

Кнопка "вверх" и варианты ее оформления

Установка на сайт кнопки, возвращающей на верх страницы, и варианты ее оформления

Все варианты кнопок реализованы довольно просто и не используют какие-либо плагины, однако для их работы требуется библиотека jQuery

Читать далее

Анимационные эффекты при прокрутке страницы

jQuery плагин ScrollMe для добавления простых анимационных эффектов на веб-страницы.

По мере прокрутки страницы плагин ScrollMe может масштабировать, поворачивать, трансформировать и изменять прозрачность элементов на странице. Он легко настраивается и не требует дополнительных строк javascript.

Читать далее