Я столкнулся с тем, что я считаю уникальной ситуацией, главным образом потому, что я не могу найти ничего, что могло бы мне помочь. Я пытаюсь добавить эффект параллакса внутри замаскированного элемента. Перед тем, как элемент можно будет ""параллаксировать"?"... он должен проскользнуть в поле зрения внутри замаскированного контейнера.
В 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) без использования отсечения?
