DEV Community

Discussion on: How to make this type of landing page??

Collapse
 
weswedding profile image
Weston Wedding

As someone already explained, it's all just being done in a video.

However, if you really wanted to do it without just baking it into a video, there ARE ways to do it by using SVGs! The caveat being that SVG support only recently really started happening across all browsers in the past couple years.

If you use the <mask> approach, you can play a video behind a SVG and knock out parts to let the video come through. Here's an example of SVG Text Mask w/ Fill on Codepen. The downside of this is that you have an SVG in front of a video, so it has to be big enough to obscure the whole video element.

You can also use a SVG clip path to clip out the parts of the video element you don't want to be visible. This method allows the animated text to just float there with any arbitrary background elements showing behind it. For example, check out SVG Clip Path Video on Codepen.

Each option has to take into account what kind of web browser support your project requires.

Sara Soueidan has excellent pages on the subject of SVG clipping, by the way. I'd recommend checking her out!
CSS SVG Clipping