Streaming live at 10am (PST)

Subtracted text with an video background


#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: http://www.navigatingresponsibly.dk/1
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: http://sab.webflow.io/cutout-text

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: https://webflow.com/website/My-Webflow-Sandbox and this experiment is on the last page.


#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.