Анимация при прокрутке страницы

[Timurkin]

Вот я залил на codepen:
https://codepen.io/timur-vinogradow/pen/vYEZZKm
Ниже добавил блоки с текстом.
Если убрать overflow: auto; для header-background, то начинает работать обычная прокрутка.
Но надо, чтобы мишень двигалась, так как она двигается со свойством overflow: auto;

[Malleys]

Но надо, чтобы мишень двигалась, так как она двигается со свойством overflow: auto;

Вы имеете в виду так... https://codepen.io/Malleys/pen/xxbrrvd?editors=0110 ?

[Timurkin]

Вы имеете в виду так... https://codepen.io/Malleys/pen/xxbrrvd?editors=0110 ?

Именно!
Еще раз, большое спасибо!

Буду разбираться, как это работает:
var(--scroll-progress, 0) * 20vh), 0 0;
Я так понял что это переменная в CSS?
И она может принимать различные значения?

[Malleys]

Я так понял что это переменная в CSS?

Да, можно и так назвать, но на самом деле это собственные свойства, которые могут принимать любые значения. В будущем можно будет указывать их тип, что позволит их даже анимировать!

И она может принимать различные значения?

Если вы не знакомы с возможностями, то можете посмотреть презентацию на эту тему с живыми примерами от Ли Веру на Ютюб — https://www.youtube.com/watch?v=UQRSaG1hQ20

[Timurkin]

Malleys,
Спасибо, ознакомлюсь!
Извините что опять дергаю вас, насчет этого:
https://codepen.io/Malleys/pen/xxbrrvd?editors=0110
При уменьшении высоты экрана браузера, картинка начинает также уменьшаться(масштабируетс� � на уменьшение).
Если фиксированную высоту делать то тогда ок, но это вроде как костыли получаются.

[Malleys]

Если фиксированную высоту делать то тогда ок, но это вроде как костыли получаются.

Вы можете указать ограничение размера вместо.

При уменьшении высоты экрана браузера, картинка начинает также уменьшаться

Вы можете указать высоту, менее которой картинка не должна уменьшаться...

min-height: 250px;

Также вы можете указать высоту, более которой картинка не должна увеличиваться...

max-height: 600px;

[Timurkin]

Malleys,
Разобрался, еще раз спасибо!!!