Как сделать плавное изменение фоновой картинки блока при прокрутке?

Question

[runapa]

Пока получилось только смена класса блока, но о плавности речи тут не идёт. Пробовал динамически менять фон, но что-то тоже не задалось. Фон скакал туда сюда как бешеный, а в итоге страница самоперезагружалась...

Answer 1

[Anton fon Faust]

А как вы хотите сделать изменение фона?
Чтобы ездил? Тогда через background-position и transition.
Чтобы картинка менялась? Тогда через изменение прозрачности, например.

Comments

[runapa]

Фон зафиксирован. Так что менять хочу путём смены картинки. Изменение прозрачности тоже пробовал, но что-то я не понимаю как сделать так, чтобы картинка поменялась один раз при скроле вниз, и вернулась обратно при скроле наверх.

[Anton fon Faust]

Фон нельзя плавно поменять. Только пошагово. Так что по скроллу вешаете событие, которое будет менять background-image. И нужно чтобы были все промежуточные изображения, если хотите плавное изменение.

[runapa]

И нужно чтобы были все промежуточные изображения, если хотите плавное изменение.

Поясните этот момент плиз. Что за промежуточные изображения?

[Anton fon Faust]

Это вы поясните, как вы хотите сделать смену фона.
Если хотите чтобы фон плавно трансформировался из, например, машинки в робота, то каждый шаг этой трансформации должен быть в виде картинки.