I'm facing what I think is a unique situation, mainly because I can't find anything to help me with this. I'm trying to add a parallax effect inside a masked element. Before the element can be..."parallaxed?"...it has to slide into view, within the masked container.
In Chrome, I have no issues as I can use:
-webkit-mask-image: url(path/to/image.png);
For Firefox, I have no issues as I can use:
<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg>
and apply the svg clip to the container which would create the mask for the larger element with:
clip-path:url("#clip-elem");
For IE 10 and 11 support, the only possible working solution for creating a mask effect is to use clipping. This gives the illusion of a mask, but actually clips the element. Once it begins to slide up or down, you immediately see that it's cut as it moves beyond the area where it should be masked.
Can anyone provide a working example (or insight), in IE, of masking with an element that animates up and down (translateY) without using clipping?
IE doesn't support CSS masking or clipping to arbitrary shapes. If you need to mask HTML elements, perhaps the best you can do is to place, in front of your elements, an image the colour of the background with a transparent hole in it.
Alternatively, perhaps you could live with IE using a rectangular clip region instead of a triangle.
Or the last option is to convert everything into an SVG. Clipping and masking works inside an SVG.