Julian Shapiro je vývojář světové třídy. Poprvé jsem se s ním setkal, když upustil od CSS vs. JS Animation:What is Faster?, která upoutala pozornost průmyslu, a pak byl natolik milý, že se vrátil s The Simple Intro to SVG Animation. Netrvalo dlouho a uvědomili si, že Julian je zvláštní talent.
Julian nedávno napsal výjimečnou knihu:Web Animation using JavaScript:Develop &Design. Julian nám všem požehnal pátou kapitolou své knihy:Animovaný text. Užijte si to!
Vzhledem k tomu, že textová animace se na webových stránkách používá jen zřídka, je její použití snadným způsobem, jak zapůsobit na uživatele. To je přesně to, co dělá toto téma tak zábavným, že se učíte:základní techniky se snadno programují, ale výsledky jsou pro uživatele neuvěřitelně bohaté a komplexní.
Tento článek vám představí nástroje, které odstraňují nudné aspekty textové animace a vybaví vás efektivním pracovním postupem. Čtěte dále a zjistěte nuance tohoto temného umění.
Standardní přístup k animaci textu
Standardní prvky HTML, pomocí kterých kódujeme stránky – div s, table s, kotevní značky a podobně – jsou komponenty nejnižší úrovně webové stránky, které lze upravovat. V důsledku toho se jedná o komponenty nejnižší úrovně, které lze animovat.
Text nepředstavuje prvek sám o sobě; blok textu je prohlížečem označen jako textový uzel , což je nestylovatelná komponenta nižší úrovně, která musí být obsažena prvkem. Další komplikací je skutečnost, že prohlížeč nerozděluje textové uzly na gramatické komponenty; neexistuje žádný způsob, jak získat přístup k jednotlivým písmenům, slovům nebo větám.
V důsledku toho, chcete-li animovat text na základě písmen, slov nebo vět, musíte rozdělit každý textový uzel na samostatné textové uzly a pak každý z nich zabalit do nového prvku. Poté je můžete animovat. Ale ručně zalamovat text do span elementy je například únavná práce, jejímž výsledkem je nabubřelý HTML.
Není tedy žádným překvapením, že animace textu na webu není běžná; je to obvykle příliš mnoho potíží, než se s tím vypořádat. To staví web do estetické nevýhody oproti specializovanému softwaru pro návrh pohybu, jako je Adobe After Effects, který umožňuje jemnou animaci textu – jejíž výsledky jsou běžně k vidění v televizních reklamách a sekvencích filmových titulů. Tyto efekty mohou vypadat naprosto nádherně. Bohužel, kromě toho, že je obtížné je integrovat na web, jsou také široce považovány za špatný postup. Koneckonců, web je médium, které upřednostňuje funkci před formou a animace textu je z velké části o formě.
Existuje však jeden případ použití textové animace, který se při střídmém používání může dobře přenést na web:pokud budete věnovat velkou pozornost vyobrazením futuristických hardwarových rozhraní ve filmech, všimnete si běžného vlákna textu, který je animován dovnitř nebo ven. pohledu na gramatiku úroveň. Budoucnost výpočetní techniky se podle popkultury skládá ze slov a vět animovaných blikáním, závadami, praskáním a rozmazáním. Tyto efekty vypadají skvěle a jejich použití pro účely přechodu obsahu do nebo ze zobrazení není příliš nevýhodné, protože text musel projít animací viditelnosti tím či oním způsobem. Tento koncept přechodu viditelnosti textu je přesně to, o čem se dozvíte v tomto článku.
Příprava textových prvků pro animaci pomocí Blast.js
Nejlepším nástrojem pro typografickou animaci je Blast.js, který snadno rozděluje bloky textu na znaky, slova a věty. Výsledné části pak můžete animovat pomocí Velocity a jeho pluginu UI pack.
POZNÁMKA:Získejte Blast.js na Julian.com/research/blast.
Blast.js má tři typy oddělovačů, které definují gramatické komponenty, které mají být jednotlivě extrahovány:znak, slovo a věta. Předpokládejme, že máte div to vypadá takto:
<div> Hello World </div>
Pokud zavoláte Blast na toto div pomocí následující syntaxe:
$("div").blast({ delimiter: "word" });
div by se změnilo v toto:
<div class="blast-root"> <span class="blast">Hello</span> <span class="blast">World</span> </div>
Jak můžete vidět, Blast oddělil cíl div 's text na části textu, které jsou jednotlivě zabaleny do prvků span. Pokud byste místo toho použili character oddělovač, výsledek by byl:
<div class="blast-root"> <span class="blast">H</span> <span class="blast">e</span> <span class="blast">l</span> <span class="blast">l</span> <span class="blast">o</span> <span class="blast"> </span> <span class="blast">W</span> <span class="blast">o</span> <span class="blast">r</span> <span class="blast">l</span> <span class="blast">d</span> </div>
Tyto prvky rozsahu nyní můžete animovat nezávisle. Než se však ponoříte do textové animace, dozvíte se více o tom, jak Blast funguje, abyste mohli plně využít jeho výkonné funkce.
Jak funguje Blast.js
Cílem této části je zpříjemnit vám možnost použití Blast k rozdělení textu na vaší milované stránce. Pojďme se ponořit!
divs , tables a další prvky HTML, které znáte, se nazývají uzly prvků . Uzel prvku se běžně skládá ze dvou typů potomků:dalších uzlů prvků a textových uzlů (nezpracovaný text).
Vezměte si například tento prvek:
<div> Hello <span>World</span> </div>
Toto div element se skládá ze dvou potomků:textového uzlu ("Ahoj") a uzlu span elementu. Uzel prvku span obsahuje vlastního potomka:další textový uzel ("World").
Když se zavolá Blast, projde celým řetězcem potomků cílového prvku a najde textové uzly. S každým textovým uzlem Blast provede dotaz RegEx spojený se zadaným typem oddělovače (character , word nebo sentence ) rozdělit uzel na nové prvky, z nichž každý má svou vlastní textovou část uzlu. Protože Blast ve skutečnosti nerozděluje prvek uzly – pouze textové uzly – můžete jej bezpečně použít na celou stránku, aniž byste se museli starat o narušení obsluhy událostí prvků a další očekávané chování. Tato všestrannost je zásadní při používání Blast na uživatelsky vytvářeném obsahu, který je často znečištěný HTML. (Řekněme například, že chcete oddělit slova ve zprávě zveřejněné v sekci komentářů vašeho webu, abyste mohli zvýraznit důležité pasáže. S Blast to můžete bezpečně udělat bez obav z porušení vložených odkazů uživatele.)
Kromě své robustnosti poskytuje Blast vysokou úroveň přesnosti. Nerozděluje tupě slova na mezery, ani nerozděluje věty na tečky ve slovech. Využívá znakové sady UTF-8 pro jazyky latinské abecedy, což znamená, že je můžete přesně použít na obsah ve francouzštině, němčině, španělštině, angličtině, italštině a portugalštině.
Předpokládejme, že jste použili Blast's sentence oddělovač v následujícím odstavci. (Všimněte si, že tučné a kurzíva se používají níže k označení po sobě jdoucích textových shod, které Blast detekuje.) Blast správně identifikoval šest vět v odstavci:
¿Rozpozná oddělovač vět tuto celou větu obsahující španělskou interpunkci? ¡Ano! « Mais, oui ! » "Vnořené "uvozovky" neporušují oddělovač vět!" Tečky uvnitř slov (např. Blast.js), ve formálních názvech (např. paní Bluth, Dr. Fünke) a v „např. a "tj." neshodují se falešně jako interpunkce na konci věty. Sakra. To je docela působivé.
Všimněte si, jak je interpunkce spojena s její správnou větou a jak chybné tečky falešně neohraničují shody vět.
Po pokrytí těchto základů je čas projít si, jak používat Blast.
Instalace
Blast je na stránce nainstalován jako jakýkoli jiný plugin JavaScript:vložte příslušný odkaz na skript před </body> vaší stránky tag:
<html> <head>My Page</head> <body> My content. <script src="jquery.js"></script> <script src="velocity.js"></script> <script src="blast.js"></script> </body> </html>
POZNÁMKA:Blast vyžaduje jQuery (nebo Zepto, alternativu jQuery), a proto musí být vyžadován po jQuery. Nezáleží na tom, zda je Blast načten před nebo po Velocity.
Jakmile je Blast načten, použijte jej voláním .blast() na objekt prvku jQuery. Jako jediný argument přijímá objekt options:
$element.blast({ option1: value1, option2: value 2 });
Pojďme si projít dostupné možnosti.
Možnost:Oddělovač
Nejdůležitější volbou Blast je delimiter , který přijímá "character" , "word" nebo "sentence" . Chcete-li oddělit text v $element pomocí oddělovače "věty", váš kód by vypadal takto:
$element.blast({ delimiter: "sentence" });
Všimněte si, že Blast vrací vygenerované prvky obálky textu do selektorového řetězce jQuery, takže s nimi můžete manipulovat takto:
$element.blast({ delimiter: "sentence" })
.css("opacity", 0.5);
Volání .css() se použije na jednotlivé textové prvky, nikoli na nadřazený $element že jste zavolali Blast.
Možnost:customClass
Blast poskytuje dvě možnosti pro usnadnění manipulace s textem:customClass a generateValueClass . customClass se chová přesně tak, jak byste očekávali:zadejte vlastní třídu (jako hodnotu řetězce), která bude přiřazena k prvkům obalu textového uzlu.
Předpokládejme, že máte následující div a Blast call:
<div> Hi Mom </div>
$("div").blast({ delimiter: "word" , customClass: "myClass" });
div by se změnilo na následující (všimněte si, jak Blast ve výchozím nastavení automaticky přiřadí každé textové části třídu "blast"):
<div> <span class="blast myClass">Hi</span> <span class="blast myClass">Mom</span> </div>
Hodnota při poskytování vlastní třídy je v rozlišení prvků generovaných každým voláním Blast. Pokud jste například použili Blast na dvou místech na své stránce – jednou v záhlaví a jednou v zápatí – může být užitečné přiřadit těmto dvěma voláním různé třídy, aby váš následný kód JavaScript a styly CSS mohly působit na textové prvky. přiměřeně.
Možnost:generovatValueClass
createValueClass přebírá booleovskou hodnotu (true nebo false), která označuje, zda má být vygenerovaným textovým prvkům přiřazena jedinečná třída ve tvaru .blast-[oddělovač]-[textValue].
POZNÁMKA:Tato možnost platí pouze pro znak a oddělovače slov.
[delimiter] zástupný symbol představuje typ oddělovače použitý ve volání a [textValue] zástupný symbol představuje text obsažený v jednotlivém prvku. Zvažte následující příklad:
$("div").blast({ delimiter: "word" , generateValueClass: true });
Prvek by se změnil na toto:
<div class="blast-root"> <span class="blast blast-word-Hi">Hi</span> <span class="blast blast-word-Mom">Mom</span> </div>
Když je Blast voláno s letter oddělovač, prvek by se místo toho změnil na toto:
<div class="blast-root"> <span class="blast blast-letter-H">H</span> <span class="blast blast-letter-H">i</span> … and so on… </div>
generateValueClass Tato možnost je užitečná, když potřebujete použít CSS nebo JavaScript k manipulaci s textovými shodami na základě textu v nich obsaženého. Pokud jste například použili tuto funkci na úryvku z knihy, mohli byste vytvořit vizualizaci všech výskytů slova „a“ tím, že prvky s třídou .blast.word-and opatříte žlutým pozadím:
// jQuery implementation
$(".blast-word-and").css("background", "yellow");
// Raw JavaScript implementation
document.querySelectorAll(".blast-word-and").forEach(function(item) { item.style.background = "yellow"; });
// CSS implementation
.blast-word-and {
background: yellow;
}
Díky této funkci můžete bezbolestně cílit na shody textu pomocí CSS nebo JavaScriptu, aniž byste museli používat chaotický vlastní kód k samostatné kontrole textového obsahu každého prvku.
Možnost:Tag
Tato volba vám umožňuje určit typ prvku, který zalamuje části textu. Výchozí hodnota je span , ale můžete předat jakýkoli typ prvku (například a, div, p). Zvažte tento příklad:
<div> Hi Mom </div>
// Use the "div" element as the wrapper tag
$("div").blast({ delimiter: "word" , tag: "div" });
Prvek by se následně změnil na toto:
<div class="blast-root"> <div class="blast">Hi</div> <div class="blast">Mom</div> </div>
Tato funkce je užitečná k zajištění toho, aby výsledné textové prvky napodobovaly strukturu okolního HTML. Možná jsou všechny blízké sourozenecké prvky z div typu, v takovém případě může být vhodný výše uvedený příklad.
Můžete také chtít využít jedinečné vlastnosti nabízené různými typy značek. strong například automaticky zvýrazní text tučně, zatímco div nutí každou shodu textu začít na novém řádku díky div výchozí display hodnotu "block" .
Příkaz:Reverse
Blast u prvku můžete vrátit zpět předáním false jako jediný parametr do volání Blast. Pokud tedy váš prvek Blasted vypadal takto:
<div class="blast-root"> <div class="blast">Hi</div> <div class="blast">Mom</div> </div>
a vy jste prošli v následujícím volání Blast:
$("div").blast(false);
prvek by se vrátil do své původní struktury:
<div> Hi Mom </div>
Možná se divíte, jak to funguje:když je Blast obrácen, jednoduše zničí vygenerované prvky obalu a poté vloží nezpracovaný text tam, kde byly prvky obalu dříve. Všimněte si, že to přeruší obslužné rutiny událostí přiřazené k novým prvkům generovaným Blastem, ale nepřeruší obslužné rutiny událostí spojené s HTML, které existovaly před prvotním voláním Blast.
Obrácení Blast tímto způsobem je klíčovou součástí textové animace, protože modus operandi při animaci prvků na webové stránce je nechat věci tak, jak byly, než jste se jich dotkli. Pokud jste například rozstříleli větu za účelem animace jejích slov do zobrazení jedno po druhém, následně byste po dokončení animace odpálili odstřel. V důsledku toho kód JavaScript, který později interaguje s textem, nebude mít neočekávané podřízené prvky, které musí analyzovat. Stručně řečeno, je dobrým zvykem nenechat svůj HTML zbytečně nafouknutý, aby další programatická interakce s vašimi prvky nebyla stále komplikovanější.
POZNÁMKA: Chcete-li se dozvědět více o Blast, včetně jeho jedinečných možností vyhledávání a jeho kompatibility se softwarem pro čtení obrazovky, navštivte jeho dokumentaci na Julian.com/research/blast.
Nyní, když jste oddělili textové prvky, je čas je animovat.
Přechod textu do zobrazení nebo ze zobrazení
Nejběžnějším použitím textové animace je animace textu v pohledu a mimo něj. Základní implementací tohoto je animace slov ve větě do zobrazení jedno po druhém.
Nahrazení stávajícího textu
Začněme vytvořením kontejneru div se zástupným textem, který bude nahrazen novým textem, který se animuje na místo:
<div> A message will load here shortly… </div>
Protože div začíná jako viditelný, odstřelování div Výsledkem textu 's jsou podřízené textové prvky, které jsou také viditelné. Protože vaším cílem je animovat vygenerované textové prvky do zobrazení počínaje stavem neviditelnosti , musíte vygenerované textové prvky zneviditelnit ihned poté, co zavoláte Blast:
$("div")
.blast({ delimiter: "word" })
.css("opacity", 0);
.velocity({ opacity: 1 });
Nahrazuje div Stávající text uživatele s novou zprávou. Poté odpálí div pomocí word oddělovač. Vzhledem k tomu, že volání Blast vrací vygenerované prvky obálky textu do selektorového řetězce jQuery, můžete snadno rozšířit kód a nastavit neprůhlednost každého textového prvku na 0. To připraví prvky pro následné volání Velocity, které se skládá z jednoduchého krytí animace.
Možná jste si všimli, že výše uvedený kód vede k tomu, že se všechny části textu animují do zobrazení současně. To samozřejmě maří účel použití Blast na prvním místě:pokud jste chtěli, aby se veškerý obsah div animoval současně, mohli jste jednoduše animovat div sám. Cílem je zde ve skutečnosti dosáhnout postupné animační sekvence, která se skládá z jednoho textového prvku animovaného za druhým.
Ohromující
Zde vstupuje do hry balíček uživatelského rozhraní Velocity. Chcete-li nastavit postupné zpoždění mezi časy zahájení animace v rámci sady prvků, použijte balíček stagger Velocity UI pack možnost, která očekává trvání zadané v milisekundách. Když jej použijete na předchozí příklad kódu, získáte:
$("div")
.html("This is our new message.")
.blast({ delimiter: "word" })
.css("opacity", 0)
.velocity("transition.fadeIn", { stagger: 50 });
Výše uvedený kód vytváří postupné zpoždění 50 ms mezi časy zahájení animace prvků. Důležité je, že si všimněte předchozí { opacity: 1 } volání Velocity argument pro "transition.fadeIn" , což je předpřipravený efekt vyblednutí, který je součástí balíčku uživatelského rozhraní Velocity. Od stagger možnost funguje s efekty balíčku uživatelského rozhraní, tento příklad ukazuje efekt, který zrcadlí animaci opacity pouze na hodnotu 1 .
Dbejte na to, abyste udržovali krátké doby rozvržení, aby uživatelé zbytečně nečekali, až text zmizí. Mějte na paměti, že čím delší je počet slov prvku, tím delší bude celkový čas, než bude sekvence animace dokončena. Rozložení textových prvků je jedním z nejjednodušších způsobů, jak sklouznout ke špatnému postupu zpomalování vašeho rozhraní.
Přechod textu mimo zobrazení
Příklad kódu v předchozí části pouze animovaný text do – nikoli z – pohledu; div Původní text uživatele byl okamžitě nahrazen novou zprávou. To nemusí nutně vést ke špatnému návrhu pohybu, ale z pohledu teorie návrhu pohybu je často přínosné sjednotit animace tak, že prvek zmizí z pohledu způsobem, který odráží způsob, jakým zmizel do zobrazení.
Pokud chcete, aby vnější textová animace zrcadlila vnitřní animaci, můžete přepracovat příklad kódu následovně:
// Select the previously blasted text
$("div .blast").velocity(
// Animate the existing text out of view with the appropriate UI pack effect
"transition.fadeOut",
{
// Stagger the outward animation as you did the inward animation
stagger: 50,
backwards: true,
// When this outward animation is complete, begin the inward animation
complete: function() {
// Proceed with the inward animation
$("div")
.html(message)
.blast({ delimiter: "word" })
.css("opacity", 0)
.velocity({ opacity: 1 }, { stagger: 50 });
}
}
);
To začíná voláním balíčku Velocity UI transition.fadeOut vliv na textové části generované div předtím byl odstřelen. Stejně jako u směru dovnitř, stagger možnost postupně odsazuje jednotlivé animace částí textu směrem ven. Novinkou tohoto volání je použití balíčku backwards Velocity UI pack možnost, která se spáruje s stagger změnit pořadí sady cílových prvků tak, aby se poslední prvek (poslední slovo ve větě) animoval mimo zorný úhel před předposledním prvkem a tento prvek se animoval mimo zorné pole před třetím předposledním prvkem , a tak dále. Když je tato vnější animační sekvence dokončena, vnitřní animace je volána z complete zpětné volání.
Pomocí backwards možnost animace textu poskytuje dvě výhody. Za prvé, pomáhá zrcadlit (vytvářet inverzní) vnitřní animace, která se skládá z prvního slova animovaného do pohledu před druhým slovem, a tak dále. Za druhé, když po zpětné animaci bezprostředně následuje animace vpřed, je výsledným efektem elegantní řetězení, ve kterém se poslední slovo ve zpětném směru a první slovo v dopředném směru vyskytují zády k sobě. To funguje tak, že spojí dvě animační sekvence dohromady do něčeho, co vypadá jako jedna spojená animace namísto dvou samostatných animací hrubě slepených dohromady.
Přechod jednotlivých částí textu
Sekvence filmových titulků jsou dobře známé pro svůj vynalézavý typografický pohybový design. Technika, která je základem mnoha z těchto efektů, je vyčlenění jednotlivých textových prvků pro animaci. Tomu se věnuje tato část.
POZNÁMKA:Pro další inspiraci pro typografickou animaci vašeho uživatelského rozhraní vyhledejte na YouTube sekvence názvů filmů a dělejte si podrobné poznámky! Dokud budete mít na paměti principy motion designu, měli byste se cítit povzbuzeni prozkoumat design textových animací ve svém rozhraní.
Chcete-li dosáhnout jemné kontroly nad prvky, které Blast generuje, jednoduše použijte CSS nth-child selektor a eq() jQuery funkce. Tyto funkce se chovají navzájem podobně v tom, že umožňují výběr prvku v sadě na základě indexu tohoto prvku. Jinými slovy, pokud byste těmto funkcím předali celočíselnou hodnotu 3, zacílily by na třetí prvek (tj. třetí slovo) v celé sadě prvků (tj. víceslovná věta):
// CSS implementation
.blast:nth-child(3) {
color: red;
}
// jQuery implementation
$(".blast").eq(2).css("color", "red");
Oba výše uvedené příklady cílí na třetí prvek na stránce, který má aplikovanou třídu .blast. (Všimněte si, že funkce jQuery eq je založena na 0, zatímco n-té dítě CSS je založené na 1, proto jsou do příkladů předávány různé celočíselné hodnoty.) Pokračujte s implementací jQuery a pracujte na úplném příkladu:
<div> Current status: paused </div>
// Blast the div using the word delimiter
$("div").blast({ delimiter: "word" })
// Select the third word in the sentence (the span containing the "paused" text)
.eq(2)
// Fade the third element out of view then replace its inner text with a new message
.velocity({ opacity: 0 }, function() { $(this).text("running"); })
// Fade the replaced text into view
.velocity({ opacity: 1 });
Toto spustí větu, vybere její třetí slovo („pozastaveno“), skryje slovo ze zobrazení, nahradí vybledlé slovo novým slovem („běží“) a poté nové slovo zviditelní. Čistým efektem je, že klíčové slovo indikující stav ve větě elegantně přejde do nového slova, aby upozornilo uživatele na změnu. Jedná se o nesmírně elegantní efekt, který se skládá pouze z několika řádků jednoduchého kódu. Pokud byste tento efekt provedli mnohokrát na větším bloku textu, mohli byste dosáhnout působivého efektu, kdy se zdá, že se jedna zpráva sporadicky mění v jinou.
Výmyslně převádí text
Efekt transition.fadeIn, který jste dosud používali, můžete snadno zaměnit za jiný efekt z balíčku uživatelského rozhraní Velocity. Některé z dalších efektů jsou docela fantazijní, od transition.shrinkIn , což způsobí zmenšení prvku do zobrazení na transition.perspectiveDownIn , což způsobí, že se prvek otočí dolů do pohledu jako výklopná vrata od stodoly.
POZNÁMKA:Úplný seznam efektů balíčku uživatelského rozhraní, včetně živých ukázek, naleznete na webu VelocityJS.org/#uiPack.)
Mějte na paměti, že některé efekty používají 3D transformace (rotateX, rotationY a translateZ), které nefungují u prvků, jejichž hodnota zobrazení CSS je nastavena na „inline“ – výchozí display hodnota zejména pro rozpětí a kotevní prvky. Řešením je nastavit textové prvky generované Blastem na zobrazovanou hodnotu "inline-block" , který zachovává "inline" prvky se chovají jako obvykle a zároveň jim poskytují přidanou funkcionalitu "block" prvky (například div a p), ve kterých lze stylovat vlastnosti související s pozicí, včetně 3D transformací. S tímto display vyladit, příklad přechodu textu dovnitř by nyní vypadal takto:
$("div")
.html(message)
.blast({ delimiter: "word" })
.css({ opacity: 0, display: "inline-block" })
.velocity("transition.perspectiveDownIn", { stagger: 50 });
Toto nastaví textové části Blasted na display hodnoty na "inline-block" ve stejném volání na css() jQuery funkce, která nastavuje prvky 'opacity na počáteční hodnotu 0 .
Textu se daří
Posledním tématem této diskuse o textové animaci je koncept rozkvětu , ambientní animace, které produkují trvalé efekty pro estetické účely. Jedním z příkladů může být řetězec textu, který bliká jako uhasínající žárovka. Další může být, že všechna slova ve větě budou nepřetržitě animovat do různých odstínů modré.
Oba tyto nápady jsou špatné.
Tyto efekty rozptylují uživatele a nakonec pobaví pouze vás – vývojáře, který si rád pohrává s motion designem. Nikdy nezahrnujte animaci jen kvůli animaci; pokud část vaší stránky nesmyslně odvádí pozornost uživatele od částí, které jsou užitečné, vraťte se na kreslicí prkno.
Vzácnou výjimkou jsou stavové indikátory – text jako „Načítání…“ – které udržují uživatele v obraze o tom, co rozhraní dělá. To jsou vhodné cíle pro textové rozmachy, protože rozkvěty říkají uživateli, že rozhraní stále zpracovává data (na rozdíl od zmrazení). Tímto způsobem kvetení působí jako poutavé vizuální tlukot srdce.
Takže pokud jsou textové úspěchy obecně považovány za špatnou praxi, proč o tom mluvíme? Protože vzkvétá které nejsou animované jsou často skvělý nápad! Považujte to za bonus bez animace, který poskytuje Blast:můžete stylizovat textové prvky generované Blastem a vytvářet barevné koláže a další jedinečné typografické návrhy. Můžete například rozdělit text sloganu webové stránky („Doručujeme štěstí až k vašim dveřím!“) slovo po slovu, abyste snížili neprůhlednost každého následujícího slova, a vytvořili tak jemný přechodový efekt, který zabírá celou větu. Takto by tento kód vypadal:
<div> Hi Mom </div>
// Blast the div then iterate through the generated text elements
$("div").blast({ delimiter: "character" }).each(function(i, element) {
// Successively reduce the opacity of each element with an arbitrary formula
var adjustedOpacity = 1 - i/10;
element.style.opacity = adjustedOpacity;
});
Místo opakování opacity hodnoty, můžete také iterovat hodnoty RGB a vytvářet barevné přechody. Pokud byste například zvýšili modrou složku textu, jehož barva zpočátku začínala jako šedá, vytvořili byste prvky, které jsou postupně bohatší na modrou:
// Blast the div then iterate through the generated text elements
$("div").blast({ delimiter: "character" }).each(function(i, element) {
// Successively increase the blue color component of each element with an arbitrary formula
var adjustedBlue = i*20;
element.style.color = "rgb(0, 0," + adjustedBlue + ")";
});
Koneckonců
Toto je jen začátek možností vytvořených granulárním ovládáním textu. Mezi další techniky patří jemné doladění souřadnic každého písmene ve slově pro vytvoření kolážového efektu nebo umístění slov po obvodu kruhu, aby se napodobil typografický design, který můžete najít na podtácku s nápojem.
I když tyto techniky mohou být vhodné pro tučné hlavní prvky domovské stránky, nemusí být vhodné pro kritické části vašeho uživatelského rozhraní, které jsou předmětem opakované interakce uživatele. Proč? Protože stylizovaný text je na první pohled hůře čitelný než text nestylizovaný. Ale pokud zvážíte rovnováhu mezi formou a funkcí, budete v pořádku!
Tento příspěvek je kapitolou převzatou z Julian's Web Animation pomocí JavaScriptové knihy. Přečtěte si knihu, abyste zvládli nejnovější principy webové animace – včetně výkonu animace, teorie, pracovního postupu a dalších.