Testview enrich7/25/2023 ![]() ![]() Please note that the last layout will not work in IE because the clip-path property is not supported.Īttention: Please keep in mind that this effect is highly experimental and only supported by some modern browsers (Chrome, Safari and Opera for now). Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. So let’s get started! Creating the Mask Image Note that we’re adding Modernizr to check for support. In this tutorial we’ll be going through the first example (demo 1).įor the mask transition effect to work, we will need an image that we’ll use to hide/show certain parts of our underlying image. The PNG itself will be a sprite image and it looks as follows: That mask image will be a PNG with transparent parts on it. While the black parts will show the current image, the white part (which is actually transparent) will be the masked part of our image that will reveal the second image. In order to create the sprite image we will use this video. ![]() We import it into Adobe After Effects to reduce the timing of the video, remove the white part and export it as a PNG sequence. To reduce the duration to 1.4 seconds (the time we want our transition to take) we’ll use the Time stretch effect. In the screenshot below, the blue portion is the background of our composition, the transparent parts of the video.įinally, we can save our composition as a PNG sequence and then use Photoshop or a tool like this CSS sprite generator to generate a single image: To remove the white part we will use Keying -> extract and set the white point to 0. This is one sprite image for a very organic looking reveal effect. We’ll create another, “inversed” sprite for the opposite kind of effect. ![]()
0 Comments
Leave a Reply. |