0

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?

Webreality
  • 623
  • 1
  • 6
  • 11

1 Answers1

0

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks for the reply. Unfortunately, client requiremenets are set in stone, so there is no way to live with a rectangular clip. Additionally, adding an image in front of the element was a thought I had. However, the area is too large and the image that would be moving underneath it (the one that would be revealed) is also too large - i'm talking 1000px tall, which would mean the covering image would have to be at least 2500px tall. that would impact performance, not to mention if the browser scales, it would no longer match. – Webreality Dec 28 '16 at 15:38
  • The covering image (the mask) should only need to be as big as the triangle. You can clip the rest out using `overflow: hidden` on the container. – Paul LeBeau Dec 28 '16 at 16:04