如何在网站上以视频为背景绘制字母形状? [英] 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屋!