Die Textmaskierung war 2018 eine recht beliebte Technik. Die Entwickler experimentierten mit mehreren Ebenen (die natürlich beliebteste ist der Videohintergrund) und verschiedenen Schriftarten.
Heute erleben wir einen Rückgang der Nutzung, da es viele andere Möglichkeiten gibt. Es ist jedoch immer noch beeindruckend und ermöglicht es Ihnen, mühelos etwas Erstaunliches zu schaffen. Schauen Sie sich zum Beispiel Stratego Branding an:
Hier verwendet das Designteam die Maskierung, um das Motto schwerer, stärker und attraktiver zu machen.
- Es gelang ihnen, drei einfache Wörter in den Mittelpunkt der Aufmerksamkeit zu rücken und sie leicht von Hintergrund und Inhalt zu trennen. “Ändere das Spiel” ist das erste, was dir auffällt.
- Sie haben die sportliche Atmosphäre mit einem geeigneten Hintergrundbild nachgebildet, ohne die Besucher zu überwältigen.
- Sie haben die Sportmetapher visuell verbessert, indem sie eine angemessene Aussage gemacht haben. Das ist nicht alles. Die Maskierung wird auch verwendet, um die Anzeige von Portfolio-Jobs zu bereichern und das Design zu vervollständigen.
Stratego Branding ist ein repräsentatives Beispiel für eine Website, die die Einfachheit der Lösung zum Vorteil macht. Ihre Website ist elegant, stark und professionell. Und mit all dem hat er Charisma und Persönlichkeit. Gut gemacht.
Wenn Sie also Gelassenheit in einem Quellbereich herstellen möchten, aber nicht möchten, dass alles statisch, übermäßig vereinfacht und langweilig ist, ist die Textmaskierung eine praktikable Lösung. Und für einen guten Start in diesem Bereich erkunden Sie diese fantastischen Code-Schnipsel. Die Entwickler teilen verschiedene Experimente mit der Öffentlichkeit und faszinieren sie mit interessanten Ideen und praktischen Lösungen.
SVG-Textmaske mit Videofüllung von Dudley Storey
Der erste Teil unserer Kollektion ist ein absoluter Klassiker in dieser Richtung. Wir haben diesen Effekt millionenfach gesehen und Dudley Storey zeigt uns, wie wir ihn mit Hilfe von HTML, SCSS und ein wenig JavaScript neu erstellen können. Dieser Stift kann bearbeitet werden, damit Sie damit spielen können. Im Hintergrund finden Sie ein HTML5-Video.
Bild mit Text maskieren svg
Ein weiterer absoluter Klassiker ist dieser von Jesús Gracia gebaute Kugelschreiber. Hier gehen Maskierungsbild und SVG-Text Hand in Hand. Als Ergebnis können wir fantastische benutzerdefinierte Schriftarten genießen. Die Buchstaben sehen außergewöhnlich aus. Der Künstler verwendet das bewährte Trio aus HTML, CSS und JS. Die Lösung ist ein hervorragender Ausgangspunkt für diejenigen, die den auf dem Startbildschirm von Stratego Branding angezeigten Effekt wiederherstellen möchten.
Alex ‘Maskeneffekt
Alex ‘Maskeneffekt basiert auf einem Scroll-Effekt. Es ist eine reine CSS-Realisierung, was bedeutet, dass es leicht und schnell ist. Die Lösung ermöglicht es Besuchern, Buchstaben zu vergrößern und zu verkleinern. Verwenden Sie während des gesamten Projekts denselben Hintergrund, um ein interessantes Ergebnis zu erzielen. Bitte beachten Sie, dass der Effekt zum jetzigen Zeitpunkt in Chrome am besten funktioniert.
CSS3-Schriftmaskenanimation von Wifeo
Wenn Sie Lust auf andere reine CSS3-Realisierungen haben, ist die CSS3-Schriftmaskenanimation von Wifeo ein Projekt, von dem Sie sich inspirieren lassen können. Der Künstler verwendet nur HTML und CSS, um diesen fantastischen Effekt zu erzielen. Auch hier möchten Sie dies in Chrome sehen, um einen vollständigen Effekt zu erzielen.
Unschärfemaske
Um die Sache interessanter zu machen, können Sie die obige Lösung leicht mit einigen Mischmodi mischen. Sie können beispielsweise einen Unschärfeeffekt wie Matt DesLauriers verwenden. Seine Unschärfemaske ist einfach unglaublich. Der Künstler nutzt eine sehr unscharfe Leinwand und eine pfeifenreine Textmaske. Es sieht stilvoll und elegant aus.
Animationsmaske mit GSAP und SVG von Martí Fenosa
Marti Fenosa geht mit dem Konzept noch einen Schritt weiter, indem er es mit GSAP-Magie lädt. Mit SVG und Maskenübergängen ist es Marti gelungen, dem Text ein charmantes Verhalten zu verleihen, das die Wörter spielerisch zeigt und verbirgt. Auch dieses Beispiel sieht in Chrome besser aus.
Bilder und Videos sind zwei beliebte Optionen für die Maskierung. Dies bedeutet jedoch nicht, dass Sie nur auf diese beiden beschränkt sind. In der Tat haben Sie andere praktikable Optionen, wie z. B. Farbverläufe.
MahdIM SVG + animierte Verlaufsmaske
Dies ist der einfachste Weg, um Maskierung und einen Verlauf zu verwenden, aber es funktioniert immer noch. Der Autor kombiniert animierte Farbverläufe und SVG-Skins ohne JavaScript-Magie. Einfach, aber elegant und auffällig. Es kann ein perfekter Abschluss für zahlreiche Projekte sein.
Enthält die Textmaskierung von Granim.j von Miles Manners
Wie im vorherigen Beispiel wird hier ein Farbverlauf verwendet, um die Formen der Buchstaben anzureichern. Miles Manners verwendet Granim.js, um die Maske zu generieren. Sie können mit Einstellungen herumspielen, Schriftart, Größe und natürlich Text ändern. Die Lösung kann problemlos in Ihrem Projekt verwendet werden – besuchen Sie einfach die offizielle Seite für alle Details.
Von DroidPinkman animierte SVG-Maske
Der Künstler zeigt, was durch ein wenig Optimieren erreicht werden kann, und verwendet einen Farbverlauf, um Text anzuzeigen / auszublenden, anstatt Symbole auszufüllen.
Textmaskierung mit snap.svg von Rachel Smith
Eine weitere Alternative zu Videos und Bildern kann die Animation sein. Schauen Sie sich die Textmaskierung mit snap.svg von Rachel Smith an. Rachels Arbeit ist wunderbar. Es macht so viel Spaß und Spaß, dass Sie es mitnehmen und sofort in Ihrem Projekt verwenden möchten. Hier wird fast alles mit Hilfe von Snap.svg erledigt.
SVG Video Mask Animation – ScrollMagic & Greensock von Susan Lee
Kommt es Ihnen bekannt vor? Ich wette, das erste, was mir in den Sinn kommt, ist eine ikonische Apple iPhone-Promotion. Und du hast recht. Susan Lee hat mit SVG, GSAP und ScrollMagic ein Replikat erstellt. Ordentlich, witzig und raffiniert.
Von Tympanus animierte Textfüllungen
Dies ist ein Ort zum Graben und Genießen der Schönheit und des Potenzials, die darin verborgen sind. Yoksel, der Autor dieser erstaunlichen Demos und des dazugehörigen Tutorials, hat mit CSS und SVG experimentiert. Das Ergebnis sind fast ein Dutzend Lösungen mit animierten Füllungen und Strichen, die in einfachen Buchstaben verwendet werden.
Was steckt hinter der Maske?
Die Textmaskierung ist nicht so einfach, wie es auf den ersten Blick erscheinen mag. Sie sind alle unterschiedlich. Ja, viele Entwickler bevorzugen die Verwendung von Videohintergründen, aber sie unterscheiden sich dennoch voneinander. Viele Tricks machen diese Lösung einzigartig: Parallaxen-Scrolling-Effekte, Verläufe, Animationen usw.
Durch das Mischen und Anpassen verschiedener Techniken können Entwickler fantastische Realisierungen vornehmen, die die Besucher nicht überfordern oder die Website belasten. Textmaskierung ist eine elegante, einfache und bewährte Methode, um Slogans oder Slogans in den Star der Show zu verwandeln.
