如何在网站上以视频为背景绘制字母形状？ [英] How can I draw a letter shape with a video as a background on my website?

问题描述

我正试图弄清此网站的制作方法，但我只是无法弄清楚它们是如何制成的。

I am trying to figure out how this website is made but I just cannot figure out how they've done this.

他们在首页上使用了gif。但是，如果将鼠标悬停在生产/创意等部分之一上，它将变得更加清晰。这是怎么做的？通过Javascript？

They are using a gif on their homepage. But, if you hover over one of the sections, "Production/ Creative", etc., it becomes clearer. How is this made? By Javascript?

他们使用箭头作为滑块。如何制作？

They are using arrows as a slider. How is this made?

最后但并非最不重要-如果单击箭头，您会看到一个正在播放的背景中显示了带有视频的形状。我一直在搜索小时，但只是想不出如何绘制那条线。

Last but not least - If you click on the arrows, you see that a shape is shown with a video in the background being played. I have been searching for hours but just cannot figure out how to draw that line.

推荐答案

您可以轻松地将遮罩与字母作为形状，您可以考虑使用SVG蒙版。

You can easily use a mask with a letter as a shape, to do this you can consider an SVG mask.

这里是一个基本示例。如您所见，SVG是基本的文本元素。只需将字体和字母调整为所需的内容即可。

Here is a basic example. As you will see, the SVG is a basic text element. Simply adjust the font and the letter to what you want:

video {
    height:300px;
    width:100%;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
}

<video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels+Videos+2292093.mp4" autoplay muted></video>

您还可以使用多个遮罩将其缩放到任意数量的字母，并根据需要调整大小/位置：

You can also scale this to any number of letter by using multiple mask and adjust the size/position like you want:

video {
    height:300px;
    width:500px;
    display:block;
    margin:auto;
    -webkit-mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >C</text></svg>') right;
    -webkit-mask-size:33% auto;
    -webkit-mask-repeat:no-repeat;
            mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >C</text></svg>') right;
            mask-size:33% auto;
            mask-repeat:no-repeat;
}

<video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels+Videos+2292093.mp4" autoplay muted></video>

这篇关于如何在网站上以视频为背景绘制字母形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！