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