Параллакс, Маска, переходы (О боже!) для IE без обрезки

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

В Chrome, у меня нет проблем, как я могу использовать:

-webkit-mask-image: url(path/to/image.png);

Для Firefox, у меня нет проблем, как я могу использовать:

<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg>

и примените клип svg к контейнеру, который создаст маску для большего элемента с:

clip-path:url("#clip-elem");

Для поддержки IE 10 и 11 единственным возможным рабочим решением для создания эффекта маски является использование отсечения. Это дает иллюзию маски, но на самом деле зажимает элемент. Как только он начинает скользить вверх или вниз, вы сразу видите, что он обрезан, когда он выходит за пределы области, где он должен быть замаскирован.

Может ли кто-нибудь предоставить рабочий пример (или понимание), в IE, маскировки с элементом, который анимирует вверх и вниз (translateY) без использования отсечения?

1 ответ

  1. IE не поддерживает CSS маскировку или отсечение к произвольным фигурам. Если вам нужно замаскировать HTML-элементы, возможно, лучшее, что вы можете сделать, это поместить перед вашими элементами изображение цвета фона с прозрачным отверстием в нем.

    В качестве альтернативы, возможно, вы могли бы жить с IE, используя прямоугольную область клипа вместо треугольника.

    Или последний вариант-конвертировать все в SVG. Обрезка и маскировка работает внутри SVG.