@Constructive

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

Примеры: cpeople.ru/#about и antonandirene.com
Можно ли это совместить с бутсрап? Если да, то как?
  • Вопрос задан
  • 11087 просмотров
Решения вопроса 1
По первой ссылке фон меняется резко. Но это заметно только при медленном прокручивании страницы. К тому же пастельные цвета мягко сменяют друг друга, а большущие рисунки отвлекают внимание от момента перехода.

Вариант решения: задать слой с другим фоном и делать ему fadeIn или fadeOut в зависимости от направления прокрутки.
https://jsfiddle.net/glebkema/8m6sL7cy/

По второй ссылке фон меняется плавно по мере прокручивания. Приятно остановиться на полпути и пойти в обратную сторону, чтобы полюбоваться качеством перехода.

Вариант решения: менять прозрачность второго слоя пропорционально координате прокрутки.
https://jsfiddle.net/glebkema/cd8pjdyg/

С бутстрапом совмещается тем, что:
  1. бутстрап уже использует jQuery и его не надо подключать самостоятельно;
  2. координаты переходов можно не задавать константами, а вычислять по положению ключевых элементов на странице.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@blolg
Для реализации таких эффектов хорошо подходит scrollmagic
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы