Free PHPFree PHP scripts classes and info

10 Incredible Text Masking Effects Examples

Text masking was quite a popular technique in 2018. Developers experminted with various layers (the most popular was, of course, the video background) and different typefaces.

Today we are witnessing a bit of decline in usage because there are many other options. However, it is still impressive and lets you create something incredible effortlessly. For example, just take a look at Stratego Branding:

Here, the design team uses masking to make the slogan weightier, stronger and more attractive.

• They managed to make three simple words the focus of attention, easily separating it from the background and content. “Change the game” is the first thing that you notice.
• They recreated the athletic atmosphere using a proper image background without overwhelming visitors.
• They enhanced the sports metaphor visually making a proper statement. That’s not all. Masking is also used to enrich the display of portfolio works, making the design complete.

Stratego Branding is a representative example of a website that turns simplicity of solution into an advantage. Their website is elegant, strong and businesslike. And with all that it has charisma and personality. Nicely done.

Therefore, if you are looking to establish serenity in a home area but you do not want it to be all static, oversimplified and dull, then text masking is a viable solution. And for a good start in this area, explore these fantastic code snippets. The developers share different experiments with the audience, fascinating them with exciting ideas and practical solutions.

SVG Text Mask w/ Video Fill by Dudley Storey

The first one in our collection is an absolute classic of this direction. We have seen this effect millions of times and Dudley Storey shows us how to recreate it with the help of HTML, SCSS and a bit of JavaScript. This pen is editable so that you can play with it. In the background you will find an HTML5 video.

Masking image with svg text

Another absolute classic is presented on this pen built by Jesus Gracia. It is here where the masking image and SVG text go hand-in-hand. As a result, we can enjoy a fantastic custom typeface. The lettering looks outstanding. The artist uses the time-proven trio of HTML, CSS and JS. The solution is an excellent starting point for those who want to recreate the effect seen in Stratego Branding’s home screen above.

Mask Effect by Alex

Mask Effect by Alex is based on a hover effect. It is a pure CSS realization, which means it’s both light and quick. The solution allows visitors to zoom in and out on the lettering. It uses the same background throughout project to produce an interesting outcome. Note that, as of this writing, the effect works best in Chrome.

CSS3 font mask animation by Wifeo

If you are up for some other pure CSS3 realizations, then CSS3 font mask animation by Wifeo is a project from which you can derive inspiration. The artist uses only HTML and CSS to pull off this fantastic effect. Again, you’ll want to view this one in Chrome for full effect.

Blur Mask

To make things more interesting, you can easily mix the previous solution with some blend modes. For example, you can use a blur effect like Matt DesLauriers did. His Blur Mask is just incredible. The artist leverages a heavily blurred canvas and a text mask that is clean as a whistle. Looks stylish and nifty.

Mask animation with GSAP & SVG by Martí Fenosa

Marti Fenosa goes a bit further with the concept by charging it with GSAP magic. Using SVG and mask transitions, Marti has managed to give the text a lovely behavior that playfully shows and hides the words. Once again, this example is best viewed in Chrome.

Images and videos are two popular choices when it comes to masking; however, it does not mean that you are limited only to these two. Indeed, you have some other viable options like, for example, gradients.

SVG mask + animated gradient by MahdIM

This is the simplest way of using masking and a gradient, but it still works. The author combines animated gradients and SVG masks without using any JavaScript magic. Simple, but elegant and eye-catching. It can be a perfect finishing touch for numerous projects.

Includable Granim.js Text Masking by Miles Manners

Much like the previous example, here a gradient is used to enrich the letterforms. Miles Manners uses Granim.js to generate the mask. You can play with settings, change the font, size and of course the text. The solution can be easily used in your project – just visit the official page for all the details.

Animated SVG Mask by DroidPinkman

The artist shows what can be done if you tweak things a little bit and use a gradient to show/hide text instead of filling the symbols.

Text masking with snap.svg by Rachel Smith

Another alternative to videos and images can be animation. Take a look at Text masking with snap.svg by Rachel Smith. Rachel’s work is marvelous. It is so fun and playful that you want to take it with you and use it in your project right away. Here, almost everything is done with the help of Snap.svg.

SVG Video Mask Animation – ScrollMagic & Greensock by Susan Lee

Look familiar to you? I bet the first thing that comes to mind is an iconic Apple iPhone promo. And you are right. Susan Lee created a replica using SVG, GSAP and ScrollMagic. Neat, nifty and refined.

Animated Text Fills by Tympanus

This is a place to dig in and enjoy the whole beauty and potential hidden within. Yoksel, the author of these incredible demos and the accompanying tutorial, has experimented with CSS and SVG. The result is nearly a dozen solutions featuring animated fills and strokes used inside simple lettering.

What’s Behind the Mask?

Text masking is not as simple as it may seem at first sight. They all are different. Yes, many developers prefer to use video backgrounds, but still, they differ from each other. Many tricks make this solution unique: parallax scrolling effects, gradients, animations, etc.

Mixing and matching various techniques lets developers come up with fantastic realizations – ones that do not overwhelm visitors nor weigh down the website. Text masking is an elegant, simple and time-proven way of transforming taglines or slogans into the star of the show.

The post 10 Incredible Text Masking Effects Examples appeared first on Speckyboy Web Design Magazine.