I've recently seen a cool digital invite that features a video of curtains that seemingly show the content underneath when played. Upon checking the video, it looks like it has a white background and no text in it. I noticed there isn't any blend mode specific to the video element either. I've been trying several methods to replicate this effect but can't quite figure it out. I'm curious about how this effect is achieved.
2 Answers
You might be overthinking it a bit! There are formats that can support transparent video, but honestly, compatibility is hit or miss—Firefox especially has had issues with this. That video you saw likely isn’t transparent at all; they have the video behind the text and just fade it in. The timing gives the illusion of revealing the text, but it's just a neat trick with the animation timing.
Just to clarify, the div content isn’t beneath the video; it’s actually on top. The technique they used here is to animate the opacity of the text so that it appears seamlessly with the curtains. It’s cleverly done; the text color matches the curtains, so it blends in until it fades in at the right moment. Try resizing the window and refreshing the site to see the full effect!
Thanks for the insight! I really appreciate the explanation.