10 ├║tr┼żkov CSS a JS na vytvorenie ohromuj├║cich efektov maskovania textu

Maskovanie textu bolo v roku 2018 pomerne popul├írnou technikou. V├Żvoj├íri experimentovali s viacer├Żmi vrstvami (najob─ż├║benej┼íie je samozrejme pozadie videa) a r├┤znymi typmi p├şsma.

Dnes sme svedkami poklesu pou┼ż├şvania, preto┼że existuje mnoho ─Ćal┼í├şch mo┼żnost├ş. Je to v┼íak st├íle p├┤sobiv├ę a umo┼ż┼łuje v├ím vytvori┼ą nie─Źo ├║┼żasn├ę bez n├ímahy. Sta─Ź├ş sa napr├şklad pozrie┼ą na strat├ęgiu zna─Źky Brano:

Dizajnov├Ż t├şm tu pou┼ż├şva maskovanie, aby sa heslo stalo ┼ąa┼ż┼í├şm, silnej┼í├şm a atrakt├şvnej┼í├şm.

  • Podarilo sa im zamera┼ą pozornos┼ą na tri jednoduch├ę slov├í a ─żahko ich odde─żova┼ą od pozadia a obsahu. ÔÇ×Zmena hryÔÇť je prv├í vec, ktor├║ si v┼íimnete.
  • Obnovili atletick├║ atmosf├ęru pomocou vhodn├ęho pozadia, bez toho, aby boli drviv├ş n├ív┼ítevn├şci.
  • Vizu├ílne vylep┼íili ┼íportov├║ metaforu spr├ívnym vyhl├ísen├şm. To nie je v┼íetko. Maskovanie sa tie┼ż pou┼ż├şva na obohatenie zobrazenia portf├│liov├Żch ├║loh a dokon─Źenie n├ívrhu.

Stratego Branding je reprezentat├şvnym pr├şkladom webovej str├ínky, ktor├í men├ş jednoduchos┼ą rie┼íenia na v├Żhodu. Ich webov├ę str├ínky s├║ elegantn├ę, siln├ę a profesion├ílne. A so v┼íetk├Żm t├Żm m├í charizmu a osobnos┼ą. V├Żborne.

Ak teda h─żad├íte zabezpe─Źenie pokoja v zdrojovej oblasti, ale nechcete, aby to bolo v┼íetko statick├ę, pr├şli┼í zjednodu┼íen├ę a nudn├ę, maskovanie textu je uskuto─Źnite─żn├Żm rie┼íen├şm. A pre dobr├Ż za─Źiatok v tejto oblasti presk├║majte tieto fantastick├ę ├║ryvky k├│du. V├Żvoj├íri zdie─żaj├║ r├┤zne experimenty s verejnos┼ąou, fascinuj├║ ich zauj├şmav├Żmi n├ípadmi a praktick├Żmi rie┼íeniami.

Textov├í maska ÔÇőÔÇőSVG s v├Żpl┼łou videa od Dudley Storey

Prv├í z na┼íej kolekcie je v tomto smere absol├║tnou klasikou. Tento efekt sme videli mili├│ny kr├ít a Dudley Storey n├ím ukazuje, ako ho vytvori┼ą pomocou HTML, SCSS a mal├ęho JavaScriptu. Toto pero je editovate─żn├ę, tak┼że s n├şm m├┤┼żete hra┼ą. Na pozad├ş n├íjdete video HTML5.

Maskovac├ş obr├ízok s textom svg

─Äal┼íou absol├║tnou klasikou je toto guli─Źkov├ę pero, ktor├ę postavil Jes├║s Gracia. Tu ide ruka v ruke maskuj├║ci obr├ízok a text SVG. V─Ćaka tomu si m├┤┼żeme vychutna┼ą fantastick├ę vlastn├ę p├şsmo. Listy vyzeraj├║ v├Żnimo─Źne. Umelec pou┼ż├şva osved─Źen├ę trio HTML, CSS a JS. Rie┼íenie je vynikaj├║cim v├Żchodiskov├Żm bodom pre t├Żch, ktor├ş chc├║ obnovi┼ą ├║─Źinok, ktor├Ż sa prejavuje na domovskej obrazovke zna─Źky Stratego Branding.

Alexov maskov├Ż efekt

Alexov maskov├Ż efekt je zalo┼żen├Ż na pos├║vacom efekte. Je to ─Źist├í realiz├ícia CSS, ─Źo znamen├í, ┼że je ─żahk├í a r├Żchla. Rie┼íenie umo┼ż┼łuje n├ív┼ítevn├şkom pribl├ş┼żi┼ą a oddiali┼ą p├şsmen├í. Pou┼żite rovnak├ę pozadie v celom projekte na z├şskanie zauj├şmav├ęho v├Żsledku. Od tohto p├şsania tento efekt funguje najlep┼íie v prehliada─Źi Chrome.

Anim├ícia masky p├şsma CSS3 od Wifeo

Ak ste pripraven├ş na ─Ćal┼íie ─Źist├ę realiz├ície CSS3, potom je anim├ícia masky p├şsma Wifeo CSS3 projektom, z ktor├ęho m├┤┼żete z├şska┼ą in┼ípir├íciu. Na dosiahnutie tohto fantastick├ęho ├║─Źinku pou┼ż├şva umelec iba HTML a CSS. Znova to budete chcie┼ą vidie┼ą v prehliada─Źi Chrome, aby ste dosiahli pln├Ż efekt.

Rozostrovacia maska

Aby sa veci stali zauj├şmavej┼íie, m├┤┼żete vy┼í┼íie uveden├ę rie┼íenie ─żahko zmie┼ía┼ą s niektor├Żmi re┼żimami mie┼íania. Napr├şklad m├┤┼żete pou┼żi┼ą efekt rozostrenia, ako to urobil Matt DesLauriers. Jeho maska ÔÇőÔÇőna rozmazanie je jednoducho ├║┼żasn├í. Umelec vyu┼ż├şva ve─żmi rozmazan├ę pl├ítno a textov├║ masku, ktor├í je ─Źist├í ako p├ş┼í┼ąalka. Vyzer├í to ┼ít├Żlovo a elegantne.

Anima─Źn├í maska ÔÇőÔÇős GSAP a SVG od Mart├ş Fenosa

Marti Fenosa ide o koncept ─Ćalej t├Żm, ┼że ho na─Ź├şta magiou GSAP. Pomocou prechodov SVG a masky sa Marti podarilo da┼ą textu o─Źaruj├║ce spr├ívanie, ktor├ę hravo ukazuje a skryje slov├í. Tento pr├şklad op├Ą┼ą vyzer├í lep┼íie v prehliada─Źi Chrome.

Obr├ízky a vide├í s├║ dve popul├írne mo┼żnosti maskovania; to v┼íak neznamen├í, ┼że ste obmedzen├ş len na t├Żchto dvoch. V skuto─Źnosti m├íte ─Ćal┼íie realizovate─żn├ę mo┼żnosti, napr├şklad prechody.

MahdIM SVG + animovaná prechodová maska

Toto je najjednoduch┼í├ş sp├┤sob pou┼żitia maskovania a prechodu, ale st├íle to funguje. Autor kombinuje animovan├ę prechody a SVG vzh─żady bez pou┼żitia akejko─żvek m├ígie JavaScript. Jednoduch├ę, ale elegantn├ę a p├║tav├ę. M├┤┼że to by┼ą dokonal├Ż dotyk mnoh├Żch projektov.

Zah┼Ľ┼ła maskovanie textu Granim.js od spolo─Źnosti Miles Manners

Rovnako ako v predch├ídzaj├║com pr├şklade sa tu pou┼ż├şva gradient na obohatenie tvarov p├şsmen. Na generovanie masky pou┼ż├şva Miles Manners Granim.js. M├┤┼żete si pohra┼ą s nastaveniami, meni┼ą p├şsmo, ve─żkos┼ą a samozrejme text. Rie┼íenie sa d├í ─żahko pou┼żi┼ą vo va┼íom projekte – v┼íetky podrobnosti n├íjdete na ofici├ílnej str├ínke.

Maska SVG animovan├í spolo─Źnos┼ąou DroidPinkman

Umelec ukazuje, ─Źo sa d├í tro┼íku vylep┼íi┼ą, a namiesto vyplnenia symbolov pou┼ż├şva gradient na zobrazenie / skrytie textu.

Maskovanie textu pomocou modulu snap.svg od Rachel Smith

─Äal┼íou alternat├şvou k vide├ím a obr├ízkom m├┤┼żu by┼ą anim├ície. Prezrite si maskovanie textu pomocou modulu snap.svg od Rachel Smith. Rachelina pr├íca je ├║┼żasn├í. Je to tak├ę z├íbavn├ę a z├íbavn├ę, ┼że si to chcete vzia┼ą so sebou a ihne─Ć ho pou┼żi┼ą na svoj projekt. Tu sa takmer v┼íetko rob├ş pomocou slu┼żby Snap.svg.

Anim├ícia masky SVG – ScrollMagic & Greensock od Susan Lee

Vyzer├í ti to dobre? Stav├şm sa, ┼że prv├í vec, ktor├í pr├şde na myse─ż, je ikonick├í propag├ícia iPhone od spolo─Źnosti Apple, A m├í┼í pravdu. Susan Lee vytvorila repliku pomocou SVG, GSAP a ScrollMagic. Elegantn├Ż, vtipn├Ż a rafinovan├Ż.

Textov├ę v├Żplne animovan├ę programom Tympanus

Toto je miesto, kde sa m├┤┼żete kopa┼ą a u┼ż├şva┼ą si v┼íetku kr├ísu a potenci├íl skryt├Ż vo vn├║tri. Yoksel, autor t├Żchto ├║┼żasn├Żch uk├í┼żok a sprievodn├Ż tutori├íl, experimentoval s CSS a SVG. V├Żsledkom je takmer tucet rie┼íen├ş s animovan├Żmi v├Żpl┼łami a ┼ąahmi pou┼ż├şvan├Żmi v jednoduch├Żch listoch.

Textov├ę v├Żplne animovan├ę programom Tympanus

─îo je za maskou?

Maskovanie textu nie je tak├ę jednoduch├ę, ako by sa mohlo zda┼ą na prv├Ż poh─żad. V┼íetky s├║ r├┤zne. ├üno, ve─ża v├Żvoj├írov uprednost┼łuje pou┼żitie pozadia videa, ale st├íle sa navz├íjom l├ş┼íia. Mnoho trikov rob├ş toto rie┼íenie jedine─Źn├Żm: efekty pos├║vania paralaxy, prechody, anim├ície at─Ć.

Mie┼íanie a porovn├ívanie r├┤znych techn├şk umo┼ż┼łuje v├Żvoj├írom robi┼ą fantastick├ę realiz├ície, ktor├ę neprekonaj├║ n├ív┼ítevn├şkov alebo neza┼ąa┼żuj├║ webov├ę str├ínky. Maskovanie textu je elegantn├Ż, jednoduch├Ż a ─Źasom overen├Ż sp├┤sob, ako premeni┼ą slogany alebo slogany na hviezdu show.