10 ├║tr┼żkov CSS a JS na vytvorenie p├┤sobiv├Żch efektov maskovania textu

Maskovanie textu bolo v roku 2018 ve─żmi popul├írnou technikou. V├Żvoj├íri experimentovali s nieko─żk├Żmi vrstvami (najpopul├írnej┼íie, samozrejme, videom na pozad├ş) 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 neuverite─żn├ę bez n├ímahy. Sta─Ź├ş sa napr├şklad pozrie┼ą na strat├ęgiu zna─Źky Brano:

Zna─Źka Stratego

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

  • Podarilo sa im obr├íti┼ą tri jednoduch├ę slov├í do centra pozornosti a ─żahko ich oddeli┼ą od pozadia a obsahu. ÔÇ×Zmena hryÔÇť je prv├í vec, ktor├║ si v┼íimnete.
  • Znovu vytvorili atletick├║ atmosf├ęru pomocou vhodn├ęho pozadia, bez toho, aby boli drviv├ş n├ív┼ítevn├şci.
  • Vizu├ílne zdokona─żovali ┼íportov├║ metaforu pomocou vhodn├ęho vyhl├ísenia. Toto nie je v┼íetko. Maska sa tie┼ż pou┼ż├şva na obohatenie zobrazovania diel v portf├│liu a dokon─Źenie n├ívrhu.
  • Stratego Branding je reprezentat├şvnym pr├şkladom webovej str├ínky, ktor├í premen├ş 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 chcete vytvori┼ą pokoj v oblasti p├┤vodu, ale nechcete, aby bolo v┼íetko statick├ę, pr├şli┼í zjednodu┼íen├ę a nudn├ę, maskovanie textu je uskuto─Źnite─żn├Żm rie┼íen├şm. Ak chcete za─Źa┼ą v tejto oblasti, presk├║majte tieto fantastick├ę ├║ryvky k├│du. V├Żvoj├íri zdie─żaj├║ r├┤zne sk├║senosti 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├Ż v na┼íej kolekcii je v tomto smere absol├║tnou klasikou. Tento efekt sme videli mili├│ny kr├ít a spolo─Źnos┼ą Dudley Storey n├ím ukazuje, ako ho obnovi┼ą pomocou HTML, SCSS a trochou JavaScriptu. Toto pero je editovate─żn├ę, tak┼że s n├şm m├┤┼żete hra┼ą. V dolnej ─Źasti n├íjdete video HTML5.

    Maska s svg textom

    ─Äal┼íou absol├║tnou klasikou je toto guli─Źkov├ę pero, ktor├ę postavil Jes├║s Gracia. Tu ide ruka v ruke maskovan├Ż obr├ízok a text SVG. V─Ćaka tomu si m├┤┼żeme vychutna┼ą fantastick├ę vlastn├ę p├şsmo. Texty vyzeraj├║ v├Żnimo─Źne. Umelec pou┼ż├şva osved─Źen├ę trio HTML, CSS a JS. Toto 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.

    Alex Mask Effect

    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 zv├Ą─Ź┼íi┼ą a zmen┼íi┼ą ve─żkos┼ą p├şsma. Pou┼żite rovnak├ę pozadie v celom projekte na z├şskanie zauj├şmav├ęho v├Żsledku. V ─Źase p├şsania tohto ─Źl├ínku tento efekt funguje najlep┼íie v prehliada─Źi Chrome.

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

    Ak chcete ─Ćal┼íie ─Źist├ę ├║spechy CSS3, anim├ícia masky p├şsma Wifeo CSS3 je projekt, ktor├Ż v├ís m├┤┼że in┼ípirova┼ą. Na dosiahnutie tohto fantastick├ęho ├║─Źinku pou┼ż├şva umelec iba HTML a CSS. T├║to skuto─Źnos┼ą budete chcie┼ą znova vidie┼ą v prehliada─Źi Chrome.

    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, napr├şklad Matt DesLauriers. Va┼ía maska ÔÇőÔÇőna rozmazanie je jednoducho neuverite─żn├í. Umelec vyu┼ż├şva ve─żmi rozmazan├ę pl├ítno a textov├║ masku, ktor├í sa ─Źist├ş ako p├ş┼í┼ąalka. Vyzer├í to moderne a ┼ít├Żlovo.

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

    Marti Fenosa ide o krok ─Ćalej s konceptom a m├í magick├║ GSAP. Pomocou prechodov SVG a masky bol Marti schopn├Ż da┼ą textu o─Źaruj├║ce spr├ívanie, ktor├ę z├íbavn├Żm sp├┤sobom ukazuje a skryje slov├í. Tento pr├şklad op├Ą┼ą vyzer├í lep┼íie v prehliada─Źi Chrome.

    Fotografie 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 atrakt├şvne. M├┤┼że to by┼ą dokonal├Ż dotyk pre r├┤zne projekty.

    Zah┼Ľ┼ła textov├║ masku Granim.js. 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 hra┼ą 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├í urobi┼ą, ke─Ć nie─Źo uprav├ş a namiesto vyplnenia symbolov pou┼żije gradient na zobrazenie / skrytie textu.

    Textov├í maska ÔÇőÔÇős snap.svg od Rachel Smith

    ─Äal┼íou alternat├şvou pre vide├í a obr├ízky m├┤┼że by┼ą anim├ícia. Prezrite si maskovanie textu Rachel Smithovej pomocou modulu snap.svg. Rachelina pr├íca je ├║┼żasn├í. Je to tak├ę z├íbavn├ę, ┼że si ju chcete vzia┼ą so sebou a ihne─Ć ju 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. ─îist├Ż, 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 neuverite─żn├Żch uk├í┼żok a sprievodn├Ż n├ívod, experimentoval s CSS a SVG. V├Żsledkom je takmer tucet rie┼íen├ş s animovan├Żmi v├Żpl┼łami a ┼ąahmi pou┼ż├şvan├Żmi jednoduch├Żmi p├şsmenami.

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

    ─îo je za maskou?

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

    Mie┼íanie a kombinovanie r├┤znych techn├şk umo┼ż┼łuje v├Żvoj├írom dosiahnu┼ą fantastick├ę ├║spechy, ktor├ę neprekonaj├║ n├ív┼ítevn├şkov a neza┼ąa┼żuj├║ str├ínky. Textov├í maska ÔÇőÔÇője elegantn├Ż, jednoduch├Ż a ─Źasom overen├Ż sp├┤sob, ako urobi┼ą slogany alebo slogany hviezdou programu.