How to Mask a Typeface into Background and make a parallax effect?

Design help General
1

Hi Guys,

I have successfully created my first web flow project.
http://rahul.design/mumbai-is-awesome

I want to learn how to mask the typeface.
I have just used the .png but want to learn how we can mask the typeface and make a background parallax on a scroll.

Let me know if you know any tricks or tips.
It’s making me hungry as F to learn and master Webflow.

Typeface%20Parallax
Typeface%20Parallax800×600 3.82 MB

2

Hi @rahul.design

You will need this custom code:

<style>
.clipme {
    -webkit-background-clip: text;
    color: transparent;
}
</style>

Here’s a clonable version I just made:

  1. Create your design (Type)
  2. Create an embed element and place the custom code in it.
  3. Give the class clipme to your clipped text. (it’ll become transparent)
  4. Give your text a background image and make it position cover and fixed.

Done :slight_smile:

Hope that helps! Happy designing! :smiley:

3 Likes
3

@donaldsv You are the saviour. Beers on me! :beer:

1 Like
4

Really cool, unfortunately not working in Firefox