🥇 ▷ 10 CSS- en JS-fragmente om ongelooflike teksmaskeringseffekte te skep ✅
10 CSS- en JS-fragmente om ongelooflike teksmaskeringseffekte te skep
Teksmaskering was in 2018 'n redelik gewilde tegniek. Ontwikkelaars het met baie lae geëksperimenteer (die gewildste natuurlik as video-agtergrond) en verskillende lettertipes.
Ons sien vandag 'n afname in die gebruik omdat daar baie ander opsies is. Dit maak egter steeds 'n indruk op u en laat u sonder enige moeite iets verstommends skep. Kyk byvoorbeeld na Brand Stratego:
Hier gebruik die ontwerpspan maskering om die leuse swaarder, sterker en aantrekliker te maak.
Hulle kon daarin slaag om hul aandag op drie eenvoudige woorde te vestig en dit maklik van die agtergrond en inhoud te skei. 'Verander spel' is die eerste ding wat u sal opmerk.
Hulle het die sportagtige atmosfeer met behulp van die toepaslike agtergrondbeeld herskep sonder om gaste te oorweldig.
Hulle het die sportmetafoor visueel verbeter deur 'n toepaslike verklaring uit te reik. Dit is nie alles nie. Maskering word ook gebruik om die vertoon van portefeuljetake te verryk, en dit komplementeer die ontwerp.
Stratego Branding is 'n verteenwoordigende voorbeeld van 'n webwerf wat die eenvoud van 'n oplossing in 'n voordeel omskep. Hul webwerf is elegant, sterk en professioneel. Tog het hy charisma en persoonlikheid. Goeie werk.
As u dus vrede in die bron wil bewerkstellig, maar u nie wil hê dat dit alles staties, te simplisties en vervelig is nie, is teksmaskering 'n praktiese oplossing. Begin met hierdie fantastiese kode-stuk. Ontwikkelaars deel verskillende eksperimente met die gehoor en fassineer hulle met interessante idees en praktiese oplossings.
SVG-teksmasker met video-invul deur Dudley Storey
Maskering van prent met SVG-teks
'N Ander absolute klassieke word aangebied in hierdie pen gebou deur Jesús Gracia. Dit is waar die maskeringsprent en SVG-teks hand aan hand gaan. As gevolg hiervan, kan ons 'n fantastiese persoonlike lettertipe geniet. Die briewe lyk spesiaal. Die kunstenaar gebruik die beproefde trio van HTML, CSS en JS. Die oplossing is 'n uitstekende beginpunt vir diegene wat die effek wat op die hoofskerm van Stratego Branding sigbaar is, wil weergee.
Alexa masker effek
Die Alexa-maskereffek is gebaseer op die blaaierffek. Dit is 'n suiwer CSS-implementering, wat beteken dat dit lig en vinnig is. Met die oplossing kan besoekers in en uit die letters inzoom. Gebruik dieselfde agtergrond in die hele projek om 'n interessante resultaat te kry. Onthou dat die effek vanaf hierdie oomblik die beste in Chrome werk.
Animasie van die CSS3-fontmasker deur Wifeo
As u van ander implemente in pure CSS3 hou, dan is die animasie van die CSS3-fontmasker van Wifeo 'n projek waaruit u inspirasie kan put. Die kunstenaar gebruik slegs HTML en CSS om hierdie fantastiese effek te bewerkstellig. Weereens, u wil dit in Chrome sien om die volle effek te kry.
Om dinge interessanter te maak, kan u die bogenoemde oplossing maklik met 'n paar mengmodusse meng. U kan byvoorbeeld die vervaag-effek gebruik, net soos Matt DesLauriers. Sy vlekmasker is eenvoudig verstommend. Die kunstenaar gebruik 'n baie fuzzy doek en 'n teksmasker wat skoon is as 'n fluit. Dit lyk stylvol en elegant.
Animasiemasker van GSAP en SVG deur Martí Fenos
Marti Fenosa gaan 'n bietjie verder met hierdie konsep en laai dit met die magie van GSAP. Met behulp van SVG- en masker-oorgange, het Marti daarin geslaag om die teks 'n bekoorlike gedrag te gee wat woorde vertoon en verberg. Hierdie voorbeeld lyk weer beter in Chrome.
Foto's en video's is twee gewilde maskeringsopsies; Dit beteken egter nie dat u slegs tot hierdie twee beperk is nie. In werklikheid het u ander regte opsies, soos gradiënt.
MahdIM SVG + geanimeerde gradiëntmasker
Sluit die maskering van Granim.js deur Miles Manner in
Soos in die vorige voorbeeld, word die gradiënt gebruik om lettervorms te verryk. Miles Manners gebruik Granim.js om die masker te genereer. U kan met die instellings speel, die lettertipe, grootte en natuurlik die teks verander. Die oplossing kan maklik in u projek gebruik word – besoek die amptelike webwerf vir meer inligting.
SVG-masker geanimeer deur DroidPinkman
Die kunstenaar wys wat gedoen kan word deur dinge 'n bietjie te verbeter en gebruik 'n helling om teks te wys / verberg in plaas van die simbole in te vul.
Maskering van teks met snap.svg deur Rachel Smith
Animasies kan 'n ander alternatief vir films en prente wees. Kyk na maskeringsteks met snap.svg deur Rachel Smith. Rachel se werk is wonderlik. Dit is so snaaks en aangenaam dat jy dit dadelik wil saamneem en dadelik in jou projek wil gebruik. Hier word byna alles gedoen met behulp van Snap.svg.
Animasie van 'n SVG-videomasker – ScrollMagic & Greensock deur: Susan Lee
Lyk dit u bekend? Ek is seker die eerste ding wat by my opkom, is die ikoniese promosie van die Apple iPhone. En jy is reg Susan Lee het die replika geskep met behulp van SVG, GSAP en ScrollMagic. Netjies, snaaks en gesofistikeerd.
Teks word geanimeer deur Tympanus
Dit is 'n plek om te grawe en te geniet van al die skoonheid en potensiaal wat daarin lê. Yoksel, die skrywer van hierdie ongelooflike demonstrasies en gepaardgaande tutoriaal, het met CSS en SVG geëksperimenteer. Die resultaat is byna 'n dosyn oplossings met geanimeerde vulsels en strepe wat in eenvoudige letters gebruik word.
Wat is agter die masker?
Maskering van teks is nie so maklik soos dit met die eerste oogopslag mag lyk nie. Hulle is almal verskillend. Ja, baie programmeerders verkies om video-agtergronde te gebruik, maar hulle verskil nog steeds. Baie truuks maak hierdie oplossing uniek: parallax-blaaffekte, gradiënte, animasies, ens.
Deur verskillende tegnieke te meng en te pas, kan die skeppers fantastiese projekte skep wat nie besoekers oorweldig of die werf belemmer nie. Teksmaskering is 'n elegante, eenvoudige en tydtoetsende manier om slagspreuke of wagwoorde in die ster van die show te omskep.