Для реализации постепенного увеличения высоты блока в зависимости от прокрутки страницы вы можете использовать JavaScript. Вот пример кода, который поможет вам достичь такого эффекта:
HTML:
```html
<div id="block" style="height: 100px;"></div>
```
CSS:
```css
#block {
background-color: #f00;
transition: height 0.5s; /* добавляем плавный переход */
}
```
JavaScript:
```javascript
window.addEventListener('scroll', function() {
var scrollPos = window.scrollY || window.scrollTop || document.documentElement.scrollTop;
// Устанавливаем максимальную высоту блока
var maxHeight = 500;
// Вычисляем новую высоту блока
var newHeight = Math.min(maxHeight, scrollPos);
// Применяем новую высоту блока
document.getElementById('block').style.height = newHeight + 'px';
});
```
Вы можете настроить переменные `maxHeight` и `transition` в соответствии с вашими потребностями. `maxHeight` определяет максимальную высоту блока, а `transition` управляет скоростью анимации.
Когда пользователь прокручивает страницу, код будет обрабатывать событие `scroll` и изменять высоту блока в зависимости от значения прокрутки `scrollPos`. Функция `Math.min` используется, чтобы ограничить новую высоту до максимального значения `maxHeight`.
Убедитесь, что вы поместили JavaScript код в блок `<script></script>` в вашем HTML файле, например, перед закрывающим тегом `</body>`.
