Subtracted text with an video background

Design help General
1

Hi there!
I have found a website with an amazing designed text. It is “see through” subtracted text with an video background.
Here is the link: Navigating Responsibly - Shipowners
I wonder if it is possible in webflow. I think the text is not included in the background video because when the page is loading with slow internet connection, I can see the text changes slowly from solid text to “see through”. I can’t find out how to do this. Google has no answer neither. So you guys are my only hope. :smiley:
Thanks in advance,

2

Wow this site is so hard to analyse/inspect :smiley: Full of code.
What is sure is their text (I assume it’s the “Climate” panel that you’re reffering to) is not a text, it’s a vector of some sort.

There are many options toi do this. The easiest proper way would be tu use a svg mask of the text on the red element. But I’m so lazy to find the proper code for it that I wanted to try a Webflow solution that allows you to keep the text as text, with minimum custom code. here is the result: cutout text

1038×643 1.82 MB

The trick is this: I use the same fixed background for the full screen element than for the text. I use custom code to get the backgroudn clipped by the text. Here is the CSS code I wrote:

<style>
  .bighead {
   background: url(https://daks2k3a4ib2z.cloudfront.net/535553e72953b275210000bd/573d8e963a2f809c6a1a6a86_Life-of-Pix-free-stock-photos-frozen-trees-winter-OlivierMiche-1440x960.jpg) no-repeat;
   background-size: cover;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-position: 0px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

I added the code at page level.

You can see it in action for yourself. Clone the site: My Webflow Sandbox - Webflow and this experiment is on the last page.

2 Likes
3

Wow, this is amazing. The solution is really smart, and elegant. I did apply it and it works so well. Thank you 100000 times for that, Vincent. :heart:

4

Cool :smiley:

You’re very welcome.

5

If you don’t mind, I would like to dicuss further on this topic. How to make this cutout text when using background video instead of image? Could you please help me? :smiley: Thank you a lot.

6

Hi @vincent,

How would i do the same with a video background?
Exactly like the sample you have here http://www.navigatingresponsibly.dk

<style> .bighead { background: url(**WHAT DO I USE HERE?**) no-repeat; background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-position: 0px 0px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Thank you for your help, you’re awesome.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.