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.
Č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.