Всем привет, сегодня хочу написать небольшую заметку о моем плагине Scrolling Anchors, найти его можно по ссылке https://github.com/Talalaev/scrollingAnchors.
Для чего нужен такой плагин с таким непонятным названием?
Он отслеживает события прокрутки на элементе плюс генерирует события (какие? читайте тут). Отслеживание происходит за счет расставленных по документу (html) якорей (anchors) и диапазонов (range).
Сейчас я придумаю пару примеров когда такой плагин может понадобиться.
Первый. (пример http://babeljs.io/docs/plugins/ меню справа)
У вас есть страница из четырех частей и в верхней менюшке есть ссылки которые подкручивают страницу к нужному месту. Допустим пользователь просто прокручивает страницу не нажимая на ссылки, а мы хотим чтобы меню показывало какая часть страницы сейчас видна. Такой функционал можно найти на большом количестве сайтов с разного рода документацией. Все благодаря bootstrap в котором данная функция есть.
Второй. (пример http://www.aluminiumleader.ru/focus/ анимация контента при прокрутке)
Опять представим туже ситуацию, что и в первом примере, только в этот раз при подкрутке очередной части страницы на экран мы хотим выполнить анимацию. К примеру плавное появление контента. Очень часто применяется на продающих сайтах.
Плагин реализует не такой уж и сложный функционал, а приведенные примеры можно реализовать и без него. Но вот вопрос, захотите ли вы опять и опять писать один и тот же код? Думаю нет.
И самое главное! Данное решение будет очень полезно в ситуации с взаимосвязанными кусочками анимации, когда вторая анимация должна ждать выполнения первой. Вы просто подписываетесь на нужные вам события и когда они возникают отправляете выполнения в очередь из которой уже другой код (другой плагин) реализует синхронное выполнение вместо асинхронного.
И когда же такое может понадобиться?
Когда то я выполнял тестовое задание на front-end разработчика. Вакансия предполагала хорошие навыки верстки. Мне предложили выполнить задание, - сверстать уже готовую страницу для сайта о алюминии (ссылки ниже), чтобы посмотреть мой подход к решению задачи.
Тестовое задание тогда я не выполнил потому, что меня загрузили другой работой (за которую платили :) ). Но задачу я запомнил и решил, что в будущем предложу свое решение, а результатом стал плагин scrollingAnchors.
Вот ссылка на ту самую страницу которая вдохновила на написание плагина. http://www.aluminiumleader.ru/production/aluminum_production/
P.S.
На этом сайте мой плагин хорошо бы прижился. Там и менюшка прижимается к верху страницы после определенного количества прокрученных пикселей, и контент появляется по мере прокрутки страницы. А вот автоматической подгрузки страницы там нет, приходится нажимать на кнопку! И это еще один пример применения плагина.