Как анимировать логотип при скролле?

Question

[denism300]

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

Реально ли такое реализовать? Если реально, то как?

Comments

[Rustam Bainazarov]

Два слоя. Один ч/б, второй цветной — меняем пропорционально прозрачность у цветного и ч/б слоёв по мере прокрутки. Это самый просто способ.

Более сложный — анимирование цветов SVG-логотипа или даже через canvas. В данном случае это излишне, на мой взгляд.

Answer 1

[apoca1ipsis]

Криво конечно, но смысл вот таков https://jsfiddle.net/

Comments

[denism300]

видимо, не совсем корректно суть изложил.
Идея в том, что лого становится цветным (или ч/б) пропорционально проскролленному, например:

[apoca1ipsis]

https://jsfiddle.net/apoca1ipsis/4myuwea1/17

filter: grayscale(100%) - использовать только для примера.
Криво выглядит из-за белого фона. Используй PNG

Создай 2 изображения
1- цветное основное
2 - ч/б для маски