Как постепенно увеличивать высоту блока в зависимости от прокрученной страницы?
Приветствую,
хочу также научиться делать, как сделано на сайте https://nft-peeps.webflow.io, но у меня с координацией очень плохо;
Пытался сделать условия, когда докручиваешь до нужной координата страницы - постепенно увеличивался высота...
Дополнительно:
Js скриптом узнаёшь высоту страницы, делишь на 100, получаешь размер одного процента высоты.
Узнаёшь высоту линии, делишь на 100.
Узнаёшь текущую позицию скролла, делишь на один процент высоты страницы.
Полученное умножаешь на один процент высоты линии и получаешь число процентов которое нужно закрасить.
Тут никакой JS не нужен
https://jsbin.com/caveqinuro/edit?html,css,output
- Так, это супер круто и хитро конечно, но как тогда нам сделать так, чтобы линия не выходила за пределы? в плане не нужно выходить за пределы, если достигнуто 100% (0%, 25%, 50%, 100% etc..)
- Кое-как сделал, но чувствую что сделал костыли;
Благодарю что помогли
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для постепенного увеличения высоты блока в зависимости от прокрученной страницы можно воспользоваться JavaScript. Ниже приведен пример кода, который будет увеличивать высоту блока по мере прокрутки страницы:
```html
.block {
width: 100%;
background-color: #f0f0f0;
transition: height 0.3s;
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var block = document.getElementById("block");
var scrolled = window.scrollY;
var newHeight = scrolled * 2; // Можно настроить скорость увеличения высоты
block.style.height = newHeight + "px";
}
```
В данном примере мы используем событие `onscroll`, которое срабатывает при прокрутке страницы. Функция `scrollFunction` получает текущее значение прокрутки страницы `window.scrollY` и устанавливает новую высоту блока, увеличивая ее в зависимости от значения прокрутки.
Таким образом, при прокрутке страницы блок будет постепенно увеличиваться. Можно настроить скорость увеличения, изменив значение переменной `newHeight` в коде.
Надеюсь, это поможет вам решить вашу проблему! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.