4.30.2016

Плагин Scrolling Anchors

Всем привет, сегодня хочу написать небольшую заметку о моем плагине 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.
На этом сайте мой плагин хорошо бы прижился. Там и менюшка прижимается к верху страницы после определенного количества прокрученных пикселей, и контент появляется по мере прокрутки страницы. А вот автоматической подгрузки страницы там нет, приходится нажимать на кнопку! И это еще один пример применения плагина.