Как сделать такую же активную полосу как у Slinky?

Question

[sanyasenka]

Прошу помогите понять, как сделать такую активную полоску сверху, как у этого сервиса. Уже три дня мучаюсь и не получается сделать для новостного сайта, а подрядчик требует и уже ругается. Пример ссылки https://www.slinky.me/Хабрахабр

Не понимаю следующее:
Как сделать, чтобы полоса могла измерить размер страницы ? (Помогите с алгоритмом).
Как сделать так, чтобы она меняла цвет в зависимости от состояния ?

Единственное, что у меня получилось сделать это определить зависимости от скролла.

Answer 1

[Юрий Лобанов]

jquery.page2page.ru/index.php5/%D0%A0%D0%B0%D0%B1%...
H - вся высота страницы,
h - высота видимой части страницы.
ширина при скролле: когда высота скролла = 0 - ширина 0,
когда высота скролла равна H-h, ширина блока 100%.
Вот в общем-то и все.

Comments

[sanyasenka]

По поводу этого кажется допёр, а как сделать, чтобы она меняла состояние ? В начале загрузка была потом переходила в другой статус и в конце тоже делала что-то ? Это с сервером связано ?

[sanyasenka]

@Radiocity нужен или не нужен ? вроде с jquery сложно подхватить статус загрузки страницы браузера это на уровне сервера получается

[Юрий Лобанов]

@Radiocity ну это как ему будет проще. Если уже используется в проекте - то почему нет?

[sanyasenka]

@iiil Коллеги попробовал примеры то, что нашёл и то, что написал господин @Radiocity ,но они будто подтормаживают. Нашёл на их сайте список описания архитектуры из этого списка. Я так понял, что они используют node.js и другие javascript технологии. В этом всё дело или нет ? https://www.slinky.me/%D0%90%D1%80%D1%85%D0%B8%D1%...

[Юрий Лобанов]

@sanyasenka здесь все можно сделать без серверных языков, о чем Вы? Я Вам написал примерный алгоритм, и еще есть отличные ответы: делайте. Если хотите, чтобы за Вас написали код, как это сделал @Radiocity, то, во-первых, отметьте его ответ решением, так как Вы ничего не говорили о плавности. Во-вторых - будьте готовы отдать такой заказ на фриланс, потому что одно дело подсказать, а другое - за Вас работу делать.

[sanyasenka]

@iiil Спасибо. Да, я уже понял, что лохонулся и взял задание с заказчика и всё не так просто делается, как думал сначала. Сейчас уже не могу допереть, как сделать, чтобы он был разный в зависимости от разных параметров. Например на странице боксёра из Украины эта полоса становится цветом флага в рандомных случаях вот скриншот habrastorage.org/files/193/6b3/40b/1936b340b11a456... в других она красочная. Я уже видел штук 5 разных анимаций и цветовых гам.

[Юрий Лобанов]

@sanyasenka для разных url добавляйте дополнительные классы к полосе. Один класс будет в background иметь картинку флага, другой - радугу, третий однородный цвет и так далее.

Answer 2

[Kirill Popolov]

Верстка+стили - делаете полосу, ширину выставляете на 0;
JS - вычисляете высоту документа. По событию скролла добавляете (в процентах, чтобы не зависеть от разрешения) соответствующее значение ширины к полосе. Для плавности можно использовать css transitions или анимации на js.

Comments

[sanyasenka]

Это изменение width получается да ? В начале этот параметр равен 0, а потом прибавляется от движения ? Правильно понимаю ? А как сделать, чтобы полоса активировалась меняла цвет ?

[Руслан Касымов]

css animation

Answer 3

[Артур Кох]

Считаем document.height и document.width.
На событии скролла вычитаем верхний offset от window.height. Приводим значение к процентам от window.height. Рисуем полоску размером в полученных процентах. Проценты применяем уже к document.width

Comments

[sanyasenka]

А разное состояние и активация ? У них при загрузке она активируется и сначала одного цвета потом переходит в другой, как это сделать знаете ? Насколько я понимаю это как то связано с сервером.

[Артур Кох]

Да, индикатор загрузки уже связан с сервером. В сети было много постов в духе "прелоадер как на youtube" или что-то в этом роде. С хожу не подскажу решение.

[sanyasenka]

@dudeonthehorse Смотрю в эту сторону, но не удается запрограммировать процесс, чтобы не только в начале был бар, но и всегда при действиях.