Синхронный скролл двух блоков
Одновременная вертикальная прокрутка двух блоков
Решение выполнено для библиотеки jQuery
Навигационное меню для лендинга
Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции
Меню реализовано с использованием библиотеки jQuery
Перелистывание изображений при скроллинге
Красивый эффект смены изображений колесом прокрутки мыши на WebGL
Данный слайдер не имеет стрелок и точек, а перелистывание фотографий происходит при скроллинге страницы.
Работает он на библиотеках TweenMax и three.js
Индикатор прокрутки страницы
Индикатор, показывающий глубину прокрутки в процентах и в виде линии.
Честно сказать, я не встречал такие индикаторы на сайтах, но в теории его можно использовать на очень больших страницах, чтобы видеть процент прочитанного. Или же применять в каком-то творчестве, заменяя им стандартную прокрутку, как в этом примере.
Анимация элементов при прокрутке — WOW.js
Скрипт WOW.js для анимации элементов при прокрутке страницы вниз.
Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.
Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript
Фиксация блока при прокрутке
2 варианта зафиксировать блок при прокрутке страницы (на jQuery и на чистом CSS)
Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.
"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS
Вертикальная прокрутка fakeScroll
Замена стандартной вертикальной полосы прокрутки на пользовательскую скриптом fakeScroll
С одной стороны полосу прокрутки можно оформить средствами CSS, но это поддерживается не во всех браузерах и уровень настроек сильно ограничен.
С другой стороны, есть мощные плагины с массой настроек, в которых зачастую нет необходимости.
fakeScroll — очень легкий скрипт (4.1кб) для стилизации вертикальной полосы прокрутки без использования библиотек. А только это в основном и требуется, например, для оформления ограниченного по высоте блока с большим количеством информации.
Параллакс эффект simpleParallax
Эффект параллакса накладываемый на теги изображений, а не на фон
simpleParallax — это простой и легкий JavaScript без каких-либо дополнительных библиотек. Он применяет эффект параллакса непосредственно к тегам изображения, а не к фону.
Фиксация сайдбара при прокрутке вверх и вниз
Плагин Theia Sticky Sidebar для фиксации боковой колонки при прокрутке страницы
Зафиксировать боковую колонку сайта можно двумя способами:
1 Зафиксировать весь сайдбар вверху и внизу страницы. Когда заканчивается колонка, она останавливается, а при прокрутке вверх опять листается до конца. Данный вариант рассмотрен в этой заметке.
2 Зафиксировать определенный блок сайдбара. Когда при прокрутке вниз до определенного блока, он фиксируется и постоянно остается видимым. Этот вариант рассмотрим в будущем.
