10 fragment├│w CSS i JS, aby stworzy─ç osza┼éamiaj─ůce efekty maskowania tekstu

Maskowanie tekstu by┼éo do┼Ť─ç popularn─ů technik─ů w 2018 roku. Programi┼Ťci eksperymentowali z wieloma warstwami (najpopularniejsz─ů oczywi┼Ťcie jako t┼éo wideo) i r├│┼╝nymi czcionkami.

Dzisiaj obserwujemy spadek wykorzystania, poniewa┼╝ istnieje wiele innych opcji. Jednak nadal robi wra┼╝enie i pozwala bez wysi┼éku stworzy─ç co┼Ť niesamowitego. Na przyk┼éad sp├│jrz na Brand Stratego:

Tutaj zespół projektowy stosuje maskowanie, aby motto było cięższe, silniejsze i bardziej atrakcyjne.

  • Uda┼éo im si─Ö skupi─ç uwag─Ö na trzech prostych s┼éowach, ┼éatwo oddzielaj─ůc je od t┼éa i tre┼Ťci. ÔÇ×Zmie┼ä gr─ÖÔÇŁ to pierwsza rzecz, kt├│r─ů zauwa┼╝ysz.
  • Odtworzyli sportow─ů atmosfer─Ö, u┼╝ywaj─ůc odpowiedniego obrazu t┼éa, bez przyt┼éaczaj─ůcych go┼Ťci.
  • Poprawili wizualnie sportow─ů metafor─Ö, wydaj─ůc odpowiednie o┼Ťwiadczenie. To nie wszystko. Maskowanie s┼éu┼╝y r├│wnie┼╝ do wzbogacenia wy┼Ťwietlania zada┼ä portfela, uzupe┼éniaj─ůc projekt.

Stratego Branding to reprezentatywny przyk┼éad strony internetowej, kt├│ra zamienia prostot─Ö rozwi─ůzania w zalet─Ö. Ich strona internetowa jest elegancka, silna i profesjonalna. Mimo to ma charyzm─Ö i osobowo┼Ť─ç. Dobra robota.

Wi─Öc je┼Ťli chcesz ustali─ç spok├│j w obszarze ┼║r├│d┼éowym, ale nie chcesz, aby by┼éo to wszystko statyczne, zbyt uproszczone i nudne, maskowanie tekstu jest praktycznym rozwi─ůzaniem. Na dobry pocz─ůtek w tym obszarze zapoznaj si─Ö z tymi fantastycznymi fragmentami kodu. Deweloperzy dziel─ů si─Ö z publiczno┼Ťci─ů r├│┼╝nymi eksperymentami, fascynuj─ůc je ciekawymi pomys┼éami i praktycznymi rozwi─ůzaniami.

Maska tekstowa SVG z wypełnieniem wideo autorstwa Dudley Storey

Pierwsza z naszych kolekcji to absolutny klasyk w tym kierunku. Widzieli┼Ťmy ten efekt miliony razy, a Dudley Storey pokazuje nam, jak go odtworzy─ç za pomoc─ů HTML, SCSS i ma┼éego JavaScript. To pi├│ro jest edytowalne, wi─Öc mo┼╝esz z nim gra─ç. W tle znajdziesz wideo HTML5.

Obraz maskuj─ůcy z tekstem svg

Kolejny absolutny klasyk prezentowany jest w tym d┼éugopisie zbudowanym przez Jes├║sa Gracia. To tutaj obraz maskowania i tekst SVG id─ů w parze. W rezultacie mo┼╝emy cieszy─ç si─Ö fantastycznym niestandardowym krojem pisma. Litery wygl─ůdaj─ů wyj─ůtkowo. Artysta wykorzystuje sprawdzone trio HTML, CSS i JS. Rozwi─ůzanie jest doskona┼éym punktem wyj┼Ťcia dla tych, kt├│rzy chc─ů odtworzy─ç efekt widoczny na ekranie g┼é├│wnym Stratego Branding.

Efekt maski Alexa

Efekt maski Alexa opiera si─Ö na efekcie przewijania. Jest to czysta realizacja CSS, co oznacza, ┼╝e ÔÇőÔÇőjest lekka i szybka. Rozwi─ůzanie umo┼╝liwia odwiedzaj─ůcym powi─Ökszanie i pomniejszanie liter. U┼╝yj tego samego t┼éa w ca┼éym projekcie, aby uzyska─ç interesuj─ůcy wynik. Pami─Ötaj, ┼╝e od tego momentu efekt dzia┼éa najlepiej w Chrome.

Animacja maski czcionki CSS3 autorstwa Wifeo

Je┼Ťli masz ochot─Ö na inne realizacje w czystym CSS3, to animacja maski czcionki CSS3 firmy Wifeo to projekt, z kt├│rego mo┼╝esz czerpa─ç inspiracj─Ö. Artysta u┼╝ywa tylko HTML i CSS, aby osi─ůgn─ů─ç ten fantastyczny efekt. Ponownie, chcesz zobaczy─ç to w Chrome, aby uzyska─ç pe┼ény efekt.

Maska rozmycia

Aby uczyni─ç rzeczy bardziej interesuj─ůcymi, mo┼╝esz ┼éatwo miesza─ç powy┼╝sze rozwi─ůzanie z niekt├│rymi trybami mieszania. Na przyk┼éad mo┼╝esz u┼╝y─ç efektu rozmycia, tak jak zrobi┼é to Matt DesLauriers. Jego maska ÔÇőÔÇőplam jest po prostu niesamowita. Artysta korzysta z bardzo rozmytego p┼é├│tna i maski tekstowej, kt├│ra jest czysta jak gwizdek. Wygl─ůda stylowo i elegancko.

Maska animacji z GSAP i SVG autorstwa Mart├ş Fenosa

Marti Fenosa idzie troch─Ö dalej z t─ů koncepcj─ů, ┼éaduj─ůc j─ů magi─ů GSAP. U┼╝ywaj─ůc SVG i przej┼Ťcia maski, Marti uda┼éo si─Ö nada─ç tekstowi urocze zachowanie, kt├│re pokazuje i ukrywa s┼éowa. Ponownie ten przyk┼éad wygl─ůda lepiej w Chrome.

Zdj─Öcia i filmy to dwie popularne opcje maskowania; nie oznacza to jednak, ┼╝e jeste┼Ť ograniczony tylko do tych dw├│ch. W rzeczywisto┼Ťci masz inne realne opcje, takie jak gradienty.

MahdIM SVG + animowana maska ÔÇőÔÇőgradientu

Jest to najprostszy spos├│b u┼╝ycia maskowania i gradientu, ale nadal dzia┼éa. Autor ┼é─ůczy animowane gradienty i sk├│rki SVG bez u┼╝ycia magii JavaScript. Prosty, ale elegancki i przyci─ůgaj─ůcy wzrok. Mo┼╝e by─ç doskona┼éym wyko┼äczeniem wielu projekt├│w.

Obejmuje maskowanie tekstu Granim.js przez Milesa Mannera

Podobnie jak w poprzednim przyk┼éadzie, gradient s┼éu┼╝y tutaj do wzbogacenia kszta┼ét├│w liter. Miles Manners u┼╝ywa Granim.js do generowania maski. Mo┼╝esz bawi─ç si─Ö ustawieniami, zmienia─ç czcionk─Ö, rozmiar i oczywi┼Ťcie tekst. Rozwi─ůzanie mo┼╝na ┼éatwo wykorzysta─ç w swoim projekcie – po prostu odwied┼║ oficjaln─ů stron─Ö, aby uzyska─ç szczeg├│┼éowe informacje.

Maska SVG animowana przez DroidPinkman

Artysta pokazuje, co mo┼╝na zrobi─ç, poprawiaj─ůc nieco rzeczy i u┼╝ywa gradientu do pokazywania / ukrywania tekstu zamiast wype┼éniania symboli.

Maskowanie tekstu za pomoc─ů snap.svg autorstwa Rachel Smith

Inn─ů alternatyw─ů dla film├│w i obraz├│w mog─ů by─ç animacje. Sp├│jrz na maskowanie tekstu za pomoc─ů snap.svg autorstwa Rachel Smith. Praca Rachel jest cudowna. Jest tak zabawny i przyjemny, ┼╝e chcesz go zabra─ç ze sob─ů i od razu wykorzysta─ç w swoim projekcie. Tutaj prawie wszystko odbywa si─Ö za pomoc─ů Snap.svg.

Animacja maski wideo SVG – ScrollMagic & Greensock autor: Susan Lee

Czy wygl─ůda ci to znajomo? Za┼éo┼╝─Ö si─Ö, ┼╝e pierwsz─ů rzecz─ů, kt├│ra przychodzi mi na my┼Ťl, jest kultowa promocja iPhone’a Apple. I masz racj─Ö. Susan Lee utworzy┼éa replik─Ö przy u┼╝yciu SVG, GSAP i ScrollMagic. Schludny, dowcipny i wyrafinowany.

Wypełnienia tekstowe animowane przez Tympanusa

Jest to miejsce do kopania i cieszenia si─Ö ca┼éym pi─Öknem i potencja┼éem ukrytym w nim. Yoksel, autor tych niesamowitych demonstracji i towarzysz─ůcego mu samouczka, eksperymentowa┼é z CSS i SVG. Rezultatem jest prawie kilkana┼Ťcie rozwi─ůza┼ä z animowanymi wype┼énieniami i poci─ůgni─Öciami u┼╝ywanymi w prostych literach.

Wypełnienia tekstowe animowane przez Tympanusa

Co kryje si─Ö za mask─ů?

Maskowanie tekstu nie jest tak proste, jak mog┼éoby si─Ö wydawa─ç na pierwszy rzut oka. Wszystkie s─ů r├│┼╝ne. Tak, wielu programist├│w woli u┼╝ywa─ç t┼éa wideo, ale nadal r├│┼╝ni─ů si─Ö od siebie. Wiele sztuczek czyni to rozwi─ůzanie wyj─ůtkowym: efekty przewijania paralaksy, gradienty, animacje itp.

Mieszanie i dopasowywanie r├│┼╝nych technik pozwala tw├│rcom tworzy─ç fantastyczne realizacje, kt├│re nie przyt┼éaczaj─ů odwiedzaj─ůcych ani nie obci─ů┼╝aj─ů witryny. Maskowanie tekstu to elegancki, prosty i sprawdzony w czasie spos├│b na przekszta┼écenie hase┼é lub hase┼é w gwiazd─Ö serialu.