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.