10 extraits CSS et JS pour créer de superbes effets de masquage de texte

Le masquage de texte était une technique assez populaire en 2018. Les développeurs ont expérimenté plusieurs couches (la plus populaire étant bien sûr l’arrière-plan vidéo) et différentes polices.

Aujourd’hui, nous assistons à une diminution de l’utilisation car il existe de nombreuses autres options. Cependant, il est toujours impressionnant et vous permet de créer quelque chose d’incroyable sans effort. Par exemple, jetez un œil à la stratégie de marque:

Ici, l’équipe de conception utilise le masquage pour rendre la devise plus lourde, plus forte et plus attrayante.

• Ils ont réussi à mettre trois mots simples au centre de l’attention, en les séparant facilement de l’arrière-plan et du contenu. “Changer le jeu” est la première chose que vous remarquez.
• Ils ont recréé l’atmosphère sportive en utilisant une image d’arrière-plan appropriée sans submerger les visiteurs.
• Ils ont visuellement amélioré la métaphore sportive en faisant une déclaration appropriée. Ce n’est pas tout. Le masquage est également utilisé pour enrichir l’affichage des travaux du portefeuille, complétant ainsi la conception.

Stratego Branding est un exemple représentatif d’un site Web qui fait de la simplicité de la solution un avantage. Leur site Web est élégant, solide et professionnel. Et avec tout cela, il a du charisme et de la personnalité. Bien fait.

Donc, si vous cherchez à établir la sérénité dans une zone source mais que vous ne voulez pas que tout soit statique, trop simplifié et ennuyeux, le masquage de texte est une solution viable. Et pour bien démarrer dans ce domaine, explorez ces fantastiques extraits de code. Les développeurs partagent différentes expériences avec le public, les fascinant avec des idées intéressantes et des solutions pratiques.

Masque de texte SVG avec remplissage vidéo par Dudley Storey

La première de notre collection est un classique absolu dans ce sens. Nous avons vu cet effet des millions de fois et Dudley Storey nous montre comment le recréer à l’aide de HTML, SCSS et un peu de JavaScript. Ce stylo est modifiable pour que vous puissiez jouer avec. En arrière-plan, vous trouverez une vidéo HTML5.

Masquage d’image avec texte svg

Un autre classique absolu est présenté dans ce stylo à bille construit par Jesús Gracia. C’est là que l’image de masquage et le texte SVG vont de pair. En conséquence, nous pouvons profiter de polices de caractères personnalisées fantastiques. Les lettres sont exceptionnelles. L’artiste utilise le trio éprouvé de HTML, CSS et JS. La solution est un excellent point de départ pour ceux qui veulent recréer l’effet vu sur l’écran d’accueil de Stratego Branding.

Effet de masque d’Alex

L’effet de masque d’Alex est basé sur un effet de défilement. C’est une pure réalisation CSS, ce qui signifie qu’il est léger et rapide. La solution permet aux visiteurs de faire un zoom avant et arrière sur les lettres. Utilisez le même arrière-plan tout au long du projet pour produire un résultat intéressant. Veuillez noter qu’au moment de la rédaction de cet article, l’effet fonctionne mieux dans Chrome.

Animation de masque de police CSS3 par Wifeo

Si vous êtes prêt pour d’autres réalisations CSS3 pures, l’animation du masque de police CSS3 de Wifeo est un projet dont vous pouvez vous inspirer. L’artiste utilise uniquement HTML et CSS pour obtenir cet effet fantastique. Encore une fois, vous voudrez voir cela dans Chrome pour un effet complet.

Masque flou

Pour rendre les choses plus intéressantes, vous pouvez facilement mélanger la solution ci-dessus avec certains modes de fusion. Par exemple, vous pouvez utiliser un effet de flou comme Matt DesLauriers l’a fait. Son masque de flou est tout simplement incroyable. L’artiste profite d’une toile très floue et d’un masque de texte propre comme un sifflet. Il a l’air élégant et élégant.

Masque d’animation avec GSAP et SVG par Martí Fenosa

Marti Fenosa va un peu plus loin avec le concept en le chargeant de magie GSAP. En utilisant des transitions SVG et masque, Marti a réussi à donner au texte un comportement charmant qui montre et cache les mots de manière ludique. Encore une fois, cet exemple semble mieux sur Chrome.

Les photos et les vidéos sont deux options populaires en matière de masquage; cependant, cela ne signifie pas que vous êtes limité à ces deux seuls. En fait, vous avez d’autres options viables, comme les dégradés.

MahdIM SVG + masque dégradé animé

C’est la façon la plus simple d’utiliser le masquage et un dégradé, mais cela fonctionne toujours. L’auteur combine des dégradés animés et des skins SVG sans utiliser de magie JavaScript. Simple, mais élégant et accrocheur. Il peut être une touche finale parfaite pour de nombreux projets.

Comprend le masquage de texte Granim.js par Miles Manners

Comme dans l’exemple précédent, un dégradé est utilisé ici pour enrichir les formes des lettres. Miles Manners utilise Granim.js pour générer le masque. Vous pouvez jouer avec les paramètres, changer la police, la taille et bien sûr le texte. La solution peut être facilement utilisée dans votre projet – visitez simplement la page officielle pour tous les détails.

Masque SVG animé par DroidPinkman

L’artiste montre ce qui peut être fait en peaufinant un peu les choses et utilise un dégradé pour afficher / masquer le texte au lieu de remplir des symboles.

Masquage de texte avec snap.svg par Rachel Smith

Une autre alternative aux vidéos et images peut être l’animation. Jetez un œil au masquage de texte avec snap.svg de Rachel Smith. Le travail de Rachel est merveilleux. C’est tellement amusant et amusant que vous voulez l’emporter avec vous et l’utiliser immédiatement sur votre projet. Ici, presque tout se fait avec l’aide de Snap.svg.

Animation de masque vidéo SVG – ScrollMagic & Greensock par Susan Lee

Cela vous semble-t-il familier? Je parie que la première chose qui me vient à l’esprit est une promotion emblématique de l’iPhone d’Apple. Et tu as raison. Susan Lee a créé une réplique à l’aide de SVG, GSAP et ScrollMagic. Soigné, plein d’esprit et raffiné.

Remplissages de texte animés par Tympanus

C’est un endroit pour creuser et profiter de toute la beauté et du potentiel cachés à l’intérieur. Yoksel, l’auteur de ces démos incroyables et du didacticiel qui l’accompagne, a expérimenté CSS et SVG. Le résultat est presque une douzaine de solutions avec des remplissages et des traits animés utilisés dans des lettres simples.

Qu’y a-t-il derrière le masque?

Le masquage de texte n’est pas aussi simple qu’il y paraît à première vue. Ils sont tous différents.Oui, de nombreux développeurs préfèrent utiliser des arrière-plans vidéo, mais ils diffèrent néanmoins les uns des autres. De nombreuses astuces rendent cette solution unique: effets de défilement de parallaxe, dégradés, animations, etc.

Le mélange et l’appariement de diverses techniques permettent aux développeurs de réaliser des réalisations fantastiques, qui ne submergent pas les visiteurs ou ne pèsent pas sur le site Web. Le masquage de texte est un moyen élégant, simple et éprouvé pour transformer des slogans ou des slogans en star de l’émission.