10 CSS i JS isječaka za stvaranje fantastičnih efekata maskiranja teksta

Maskiranje teksta bilo je prilično popularna tehnika u 2018. Razvojni programeri eksperimentirali su s viŔe slojeva (najpopularniji je, naravno, video pozadina) i različitim fontovima.

Danas smo svjedoci smanjenja upotrebe jer postoje mnoge druge mogućnosti. Međutim, i dalje je impresivno i omogućava vam da stvorite neÅ”to nevjerojatno bez napora. Na primjer, pogledajte samo marke stratego:

Ovdje dizajnerski tim koristi maskiranje kako bi moto bio teži, jači i privlačniji.

  • Uspjeli su napraviti tri jednostavne riječi u srediÅ”tu pozornosti, lako ih razdvajajući od pozadine i sadržaja. “Promijenite igru” prvo je Å”to primijetite.
  • Ostvarili su atletsku atmosferu koristeći prikladnu pozadinsku sliku bez prevladavanja posjetitelja.
  • Vizualno su poboljÅ”ali sportsku metaforu dajući odgovarajuću izjavu. To nije sve. Maskiranje se također koristi za obogaćivanje prikaza portfelja, dovrÅ”avajući dizajn.

Stratego Branding reprezentativan je primjer web stranice koja jednostavnost rjeŔenja pretvara u prednost. Njihova web stranica je elegantna, jaka i profesionalna. I uz sve to ima karizmu i osobnost. Dobro napravljeno.

Dakle, ako želite uspostaviti spokoj u izvornom području, ali ne želite da bude sve statično, pretjerano pojednostavljeno i dosadno, maskiranje teksta je izvedivo rjeÅ”enje. A za dobar početak u ovom području istražite ove fantastične isječke koda. Programeri dijele različite eksperimente s javnoŔću, fascinirajući ih zanimljivim idejama i praktičnim rjeÅ”enjima.

SVG tekst maska ā€‹ā€‹s video popunjavanjem Dudley Storeyja

Prva naÅ”a kolekcija apsolutni je klasik u ovom smjeru. Ovaj smo efekt vidjeli već milijunima puta i Dudley Storey pokazuje nam kako ga ponovo stvoriti uz pomoć HTML-a, SCSS-a i malo JavaScript-a. Olovku je moguće uređivati ā€‹ā€‹tako da se možete igrati s njom. U pozadini ćete pronaći HTML5 videozapis.

Maskiranje slike tekstom svg

JoÅ” jedan apsolutni klasik predstavljen je u ovoj kemijskoj olovci koju je sagradio JesĆŗs Gracia. Ovdje maskirajuća slika i SVG tekst idu ruku pod ruku. Kao rezultat toga, možemo uživati ā€‹ā€‹u fantastičnom korisničkom tekstu. Pisma izgledaju iznimno. Umjetnik koristi provjereni trio HTML, CSS i JS. RjeÅ”enje je izvrsno polaziÅ”te za one koji žele ponovno stvoriti učinak viđen na početnom zaslonu marke Stratego Branding.

Aleksov efekt maske

Aleksov efekt maske zasnovan je na efektu pomicanja. To je čista CSS realizacija, Å”to znači da je lagan i brz. RjeÅ”enje omogućuje posjetiteljima da zumiraju i umanjuju slova. Koristite istu pozadinu tijekom projekta kako biste postigli zanimljiv rezultat. Napominjemo da od ovog pisanja učinak najbolje djeluje u Chromeu.

Animacija CSS3 maske fonta od strane Wifeo

Ako se odlučite za ostale čiste CSS3 realizacije, onda je Wifeo-ova CSS3 animacija maski fontova projekt iz kojeg možete dobiti inspiraciju. Umjetnik koristi samo HTML i CSS da bi postigao ovaj fantastični učinak. Ponovo, ovo ćete htjeti vidjeti u Chromeu za potpuni učinak.

Zamućena maska

Da biste stvari učinili zanimljivijima, gornje rjeÅ”enje možete jednostavno mijeÅ”ati s nekim načinima mijeÅ”anja. Na primjer, možete koristiti efekt zamućenja kao Å”to je to učinio Matt DesLauriers. Njegova zamućena maska ā€‹ā€‹jednostavno je nevjerojatna. Umjetnik koristi vrlo zamagljeno platno i tekstualnu masku koja je čista kao zvižduk. Izgleda elegantno i elegantno.

Animacijska maska ā€‹ā€‹s GSAP-om i SVG-om MartĆ­ Fenosa

Marti Fenosa ide malo dalje s konceptom učitavajući ga GSAP magijom. Koristeći prijelaze SVG i maske, Marti je uspjela dati tekst Å”armantnog ponaÅ”anja koje razigrano prikazuje i skriva riječi. Opet, ovaj primjer izgleda bolje na Chromeu.

Slike i videozapisi dvije su popularne opcije kada je u pitanju maskiranje; međutim, to ne znači da ste ograničeni na samo ovo dvoje. U stvari, imate i druge održive mogućnosti, poput gradijenata.

MahdIM SVG + animirana gradijentna maska

To je najjednostavniji način upotrebe maskiranja i gradijenta, ali to i dalje djeluje. Autor kombinira animirane gradijente i SVG kože bez upotrebe JavaScript magije. Jednostavno, ali elegantno i upečatljivo. Može biti savrŔen dorada za brojne projekte.

Uključuje Granim.js maskiranje teksta Milesa Mannersa

Kao i u prethodnom primjeru, ovdje se ovdje koristi gradijent za obogaćivanje oblika slova. Miles Manners koristi Granim.js za generiranje maske. Možete se igrati oko postavki, mijenjati font, veličinu i naravno tekst. RjeÅ”enje se lako može koristiti u vaÅ”em projektu – samo posjetite službenu stranicu za sve detalje.

SVG masku animirao DroidPinkman

Umjetnik pokazuje Ŕto se može učiniti malo podeŔavanjem stvari i koristi gradijent za prikazivanje / sakrivanje teksta umjesto popunjavanja simbola.

Tekst maskiranje s snap.svg autorice Rachel Smith

Druga alternativa videozapisima i slikama može biti animacija. Pogledajte tekst maskiranja s snap.svg Rachel Smith. Rachelin rad je divan. Toliko je zabavno i zabavno da ga želite ponijeti sa sobom i odmah ga iskoristiti na svom projektu. Ovdje se gotovo sve radi uz pomoć Snap.svg.

SVG Video Maska Animacija – ScrollMagic & Greensock Susan Lee

Izgleda li vam poznato? Kladim se da je prva stvar koja mi padne na pamet ikonična iPhone promocija Apple, I u pravu ste. Susan Lee stvorila je repliku koristeći SVG, GSAP i ScrollMagic. Uredan, duhovit i profinjen.

Tekstne ispune animirane od strane Tympanusa

Ovo je mjesto za kopanje i uživanje u svim ljepotama i potencijalima skrivenim u sebi. Yoksel, autor ovih nevjerojatnih demonstracija i pratećeg vodiča, eksperimentirao je s CSS-om i SVG-om. Rezultat je gotovo desetak rjeÅ”enja s animiranim ispunama i potezima koji se koriste u okviru jednostavnih slova.

Tekstne ispune animirane od strane Tympanusa

Å to se krije iza maske?

Maskiranje teksta nije tako jednostavno kao Ŕto se može činiti na prvi pogled. Svi su različiti.Da, mnogi programeri radije koriste video pozadine, ali ipak se razlikuju jedan od drugog. Mnogi trikovi čine ovo rjeŔenje jedinstvenim: efekti pomicanja paralaksa, gradijenti, animacije itd.

MijeÅ”anje i usklađivanje različitih tehnika omogućava programerima fantastične realizacije, koje ne opterećuju posjetitelje ili teže na web mjestu. Maskiranje teksta je gladak, jednostavan i vremenski testiran način da se slogove ili slogane transformiraju u zvijezdu emisije.