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

Die eerste van ons versamelings is ‘n absolute klassieke in hierdie rigting. Ons het hierdie effek al miljoene kere gesien, en Dudley Storey wys ons hoe om dit met HTML, SCSS en klein JavaScript weer te gee. Hierdie pen is bewerkbaar, sodat jy daarmee kan speel. Op die agtergrond vind u HTML5-video.

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.

Vervaag masker

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

Dit is die maklikste manier om maskering en gradiĆ«nt te gebruik, maar dit werk steeds. Die skrywer kombineer geanimeerde gradiĆ«nte en SVG-velle sonder om JavaScript-magie te gebruik. Eenvoudig, maar elegant en opvallend. Dit kan ‘n perfekte afwerking vir baie projekte wees.

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.

Teks word geanimeer deur Tympanus

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.