Использование фиксированной маски SVG с прокручиваемым фоном

Я пытаюсь добиться определенного эффекта для логотипа на веб-сайте. Я хочу, чтобы логотип менял цвет, заполняя его снизу вверх во время прокрутки. Например, после прокрутки 300 пикселей цвет логотипа меняется с белого на черный. Важная часть состоит в том, что она связана со случаем прокрутки, а не с независимой анимацией. Чтобы уточнить, я сделал анимированный GIF: анимация логотипа

Требования:

  • логотип закреплен на сайте (я считаю, что это усложняет)
  • логотип - это файл SVG
  • логотип используется на изображении, поэтому я не могу использовать цвет фона на SVG

Я уже пробовал следующее:

Я создал div #logoс position: fixed;, на белом фоне и с использованием свойства mask-image, mask-image: url(logo.svg);которое дает мне логотип на белом фоне. Используя черный :beforeэлемент, я могу успешно наложить изображение на черный. Однако, поскольку #logoэлемент исправлен, я не могу прокрутить псевдоэлемент. Вот где я сейчас застрял. Кто-нибудь знает, как это решить? Любое решение оценивается, если оно соответствует моим требованиям.

Спасибо!

html,css,svg,mask,

0

Ответов: 0

Использование фиксированной маски SVG с прокручиваемым фоном

Я пытаюсь добиться определенного эффекта для логотипа на веб-сайте. Я хочу, чтобы логотип менял цвет, заполняя его снизу вверх во время прокрутки. Например, после прокрутки 300 пикселей цвет логотипа меняется с белого на черный. Важная часть состоит в том, что она связана со случаем прокрутки, а не с независимой анимацией. Чтобы уточнить, я сделал анимированный GIF: анимация логотипа

Требования:

  • логотип закреплен на сайте (я считаю, что это усложняет)
  • логотип - это файл SVG
  • логотип используется на изображении, поэтому я не могу использовать цвет фона на SVG

Я уже пробовал следующее:

Я создал div #logoс position: fixed;, на белом фоне и с использованием свойства mask-image, mask-image: url(logo.svg);которое дает мне логотип на белом фоне. Используя черный :beforeэлемент, я могу успешно наложить изображение на черный. Однако, поскольку #logoэлемент исправлен, я не могу прокрутить псевдоэлемент. Вот где я сейчас застрял. Кто-нибудь знает, как это решить? Любое решение оценивается, если оно соответствует моим требованиям.

Спасибо!

00HTML, CSS, SVG, маска,
Похожие вопросы