Как при скролл менять фон body?


#1

Я хочу, чтобы при скролле, менялся фон сайта. В моем случае, это градиент. Как при прокрудке просто менять фон из CSS я знаю. Мне нужно, чтобы это было плавно и с градиентом.


#2

Должна ли плавность быть привязана к скорости/дальности скролла?

Если нет, то элементу с фоном нужно добавить css свойство transition (читай доку как именно использовать это свойство документации). Тогда изменение цвета будет происходить плавно.

Несложный градиент можно сделать css-ом. Пример градиента на css (не знаю качества сайта, просто подвернулся) https://uigradients.com/#MoonlitAsteroid

И посмотри поддерживают ли браузеры, которые тебе нужно поддерживать, тот функционал который тебе нужно реализовать.


#3

Демка из интернетов https://codepen.io/daveredfern/pen/zBGBJV


#4

Мне нужен именно градиент, почему то с простыми цветами все действует, но с градиентом, перестает


#5

Наверное потому что не указано корректно какое свойство должно анимироваться transition. В параметрах этого свойства нужно указывать что именно анимировать https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions


#6


Не понимаю в чем проблема?


#7

Я поигрался с кодом. Кажется не получится анимировать background свойство если в нем градиент или фоновое изображение. Следовательно нужно искать другую стратегию. Сейчас у меня идей нет.


#8

ок