Разный фон при прокрутке разных секций — как сделать?

Question

[Александр Осадчий]

Здравствуйте!

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

Comments

[Lord_Dantes]

Градиентом?

[Александр Осадчий]

slave, просто цветом

Answer 1

[RAX7]

Можно с помощью ScrollMagic

Comments

[Александр Осадчий]

Отличное решение, спасибо большое!

[RAX7]

Пожалуйста =)

[Александр Осадчий]

Подскажите пожалуйста, а можно ли еще к этому делу прикрутить toogleclass для секций - то есть пока секция в зоне видимости - у нее класс active..крутим далее - класс удаляется ?

[RAX7]

Александр Осадчий, обновил ответ, добавил метод setClassToggle для переключения класса

[Александр Осадчий]

RAX7, Вы лучший, спасибо огромное!

[Александр Осадчий]

RAX7, вы извините пожалуйста, но пользуясь случаем не могу спросить последний важный момент..

Могу ли я еще вот что спросить:

У меня при прокрутке страницы играют два цвета - насыщенно синий и белый

В общем, возможно ли еще (помимо класса active) к тегу body добавлять имя секции в виде класса?

Например
section class="sec_one active"

И на момент активности секции у body класс sec_one - это уж я вас прям замучил вопросами..но вдруг и это получится..еще раз спасибо огромное!!

[RAX7]

Александр Осадчий, добавь для секций еще один data-атрибут и также с помощь setClassToggle переключай классы. Обновил ответ.

[Александр Осадчий]

RAX7, Я даже не знаю, как вас благодарить - но вы очень круто помогли мне, огромнейшее спасибо вам!!!

[Александр Осадчий]

RAX7, Блин...беда..там последнее решение поломало предпоследнее - класс active теперь не добавляется - что это может быть?

[RAX7]

Александр Осадчий, как оказалось нельзя использовать несколько setClassToggle, переделал по другому. Сейчас вроде всё работает

[Александр Осадчий]

RAX7, Мне уже и стыдно писать...снова глюк - класс актив добавляется, но не правильно - он сначала добавляется для каждой секции..то есть все секции с классом active, а при повторной прокрутке - удаляется поочередно у каждой секции(

[RAX7]

Александр Осадчий, поправил, теперь вроде всё работает)

[Александр Осадчий]

RAX7, Сори, сразу не отписался - последний вариант - он идеален, все просто супер - еще раз огромнейшее спасибо!!

[RAX7]

Александр Осадчий, пожалуйста=)