Как измененять размер фона (картинки) блока при скролле?

Question

[Sparkqy]

При скроллинге данного сайта, изменяется размер background-image блока хедера. Как реализовать такой эффект? Ссылка на сайт, там все наглядно:
https://netology.ru/programs/seo-for-beginners#/pr...

Comments

[lloydbanks]

Если там все наглядно, то в чем проблема?
При скроллинге там меняются св-ва transform: scale и translateY
Покажите пример кода, что именно не получается?

[Никита Егоров]

lloydbanks, и opacity еще.

Answer 1

[marrs]

Всего 2 шага

В css - берешь элемент с фоном-картинкой, и задаешь свойства
background-size: cover;
transform: scale(1) translateY(0px);
opacity: 1

В js - по событию scroll изменяешь css свойства, уменьшаешь цифры по коэффициенту (можно подобрать визуально)
transform: scale(0.955357) translateY(18.1518px);
opacity: 0.776786;

Comments

[Sparkqy]

Спасибо! Буду пробовать