33 подписчика
🗒 Вычисление прогресса прокрутки страницы
Получение прогресса прокрутки страницы в виде переменной CSS с помощью нескольких строк кода
- Работает на основе анимации, управляемой прокруткой
- Определяется на уровне :root (доступно для всех элементов)
- Типизируется с помощью @property
- Можно легко использовать в любой формуле
@property --s {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
:root {
animation: scroll 1s linear;
animation-timeline: scroll();
}
@keyframes scroll {
to {--s: 100}
}
element:before {
content: counter(s) "%";
counter-reset: s var(--s);
}
#css
Около минуты
24 июля 2024