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