Moderní Web
Jiří Lex
1. vydání
Vydáno v lednu 2016 jako 23.publikace nakladatelství
Nakladatel: Pavel Kohout (www.kknihy.cz)

ISBN:
epub: ISBN 978-80-88061-55-7
mobi: ISBN 978-80-88061-56-4
pdf: ISBN 978-80-88061-57-1

Úvod

V současné době se spousta webdesignérů snaží vymyslet co možná nejoriginálnější rozložení informací na webu. Nedá se přímo říci, že existuje jedno ideální řešení, každé má své výhody a nevýhody. Jedno řešení se více hodí pro eshop, jiné zase pro informační web a úplně jiné pro různá interní řešení.

Požadované znalosti

Pro plné pochopení veškerého obsahu je třeba mít základní povědomí o webových stránkách, grafice, znalost jazyků HTML, CSS a JavaScriptu, zejména jQuery.

Pokud neovládáte tyto znalosti, stačí přeskočit zdrojové kódy. Inspirovat se může každý manager či majitel firmy, který uvažuje o tom, že si nechá vytvořit webové stránky.

Díky této knize získá každý čtenář povědomí o tom, jak se dají dělat webové stránky. Nezapomínejme, že existuje více stylů tvorby webových stránek. V této knize se podíváme jen na jeden z těchto stylů.

Kniha je určená i pro učitele, studenty a vývojáře.

Zaměření knihy

Kniha se bude věnovat webdesignu. V úvahu se budou brát nové technologie s ohledem na psychologii a vypozorované chování uživatelů internetu. Nemálo se přihlíží i k historii lidstva a naší kultuře.

Žádnému webdesignérovi ani grafikovi nebude vnucovat svůj styl jako ten nejoptimálnější, ale poukáže na to, že může existovat i jiný, snad se dá použít i slovo umělecký, styl při tvorbě webových stránek.

Nakonec stejně bude záležet na každém z vás, zda se rozhodnete využít některé poznatky z této knihy ve svých projektech.

Nikdo nemá rád dlouhé rolování!

Tato kapitola bude poměrně rozsáhlá. Příliš mnoho obsahu na jedné stránce je opravdu smrtící. Viz třeba novinky na facebooku. Každý, kdo má více než sto aktivních přátel, prakticky nezvládá sledovat všechny aktuality, pokud na facebooku nesedí od rána do večera. A kdo z nás, jestliže jste uživatelé facebooku, si novinky prohlíží až ke dnu?

Toto není problém jen facebooku, ale všech webů s obrovským množstvím obsahu (eshopy, redakční weby, fóra a další).

Facebook, to řeší, třeba tříděním přátel do kategorií. Což je jedno z mnoha základních řešení. Podíváme se na další.

Co s tím?

1. Zkrátit obsah
Úplně nejjednodušší je napsat, že byste měli obsah sdělení zmenšit na co možná nejnutnější minimum. Pokud se vám zdá, že už jste na minimu, tak to celé vzít a zmenšit ještě dvojnásob.
V praxi to bohužel moc nefunguje. Není to žádná nová myšlenka, ale zaznít tu musí. Je to základ.
Přehnané množství obsahu vede k zahlcení informacemi a následnému ignorování sdělení.

2. Omezit nebo nejlépe zrušit reklamu
Snadno se to píše, ale pokud je reklama váš hlavní zdroj příjmů z webu, může to být problém.
Kompromis je reklamu nijak nevnucovat a umístit ji do jednoho bloku třeba 200 x 300 px, nejčastěji vpravo či někam do zápatí webu. Pokud máte více reklamních partnerů, tak nechat reklamy náhodně střídat.
Samozřejmě, že reklam pro web je více druhů. Rozebrat tu všechny by vyšlo asi na samostatnou knihu.
Pro reklamu platí stejné pravidlo jako pro obsah, a to možná i desetinásobně. Čím více reklamy na webu je, tím více ztrácí účinnost obsah webu a hlavně i efektivita samotné reklamy.
Velice často se na to zapomíná a ještě častěji porušuje, a pak se najednou spousta firem diví, jak to, že ta investice do reklamy už nepřináší takový zisk jako dřív.

3. Sdělení formou obrazu
Tato metoda je sice starší, ale je daleko efektivnější než text a vhodnější pro web než videa. Na rozdíl od videí nezabírají tolik prostoru a jsou dobrá i pro pomalejší připojení. Navíc obrazová sdělení mohou být i velice levná, a proto vhodná pro menší weby.
Takové sdělení nemusí nutně vypadat jako komiks, ale i tato představa je velice zajímavá a někdo z vás se jí může chytit. Což je vhodné pro opravdu dobré grafiky.
Většinou spíše stačí dát na web k textu obrázek, který co možná nejlépe charakterizuje obsah. Návštěvníkovi to rychle pomůže rozlišit, zda je obsah pro něj zajímavý, a pokud usoudí, že ano, většinou mu nevadí přečíst si i delší článek.

4. Sdělení formou animací
Toto už je poměrně moderní přístup. Krásná sofistikovaná animace, kdy na vás vyskakují různé animované texty, obrázky, jsou vám postupně předkládána různá hesla a krátké informace, je opravdu vhodný způsob jak zaujmout.
Platí však nepříjemné pravidlo, že taková animace nesmí být dlouhá, většinou jen 1– 9 s (dle tipu). Pokud je animace delší, neměla by návštěvníka omezovat v případném přechodu na jiný obsah, tzn., měla by být vidět navigace. Jinak může návštěvník odejít.

5. Sdělení formou videa
Díky neustále se zrychlujícímu připojení k internetu a nástupu HTML5 video se objevil celkem zajímavý trend využívání reklamních spotů formou videa na místo sliderů. Což je sice velice vítané zpestření, ale finančně poměrně náročné, pokud tedy mluvíme o opravdu „vymakaných“ animovaných videích. Častější a levnější je natočit nějaký reklamní spot domácí kamerou nebo za pomoci lepších mobilních telefonů. Tato levnější varianta však většinou není příliš poutavá a nemusí hned uživateli říci, co je obsahem sdělení.
Způsob, jakým se má natočit takový reklamní spot, je navíc i svazující, protože pro web stále není úplně ideální používat zvuk.

6. Sdělení formou zvuku
Častější je tato forma asi pro zpěváky, ale dá se použít i na webu. Pokud si troufáte. Navštívíte-li nějaký web, kdy najednou slyšíte všude výbuchy nebo na vás začnou stránky mluvit, většinou se vylekáte a můžete se dočkat i trapné situace, jestliže jste někde ve společnosti. Na druhou stranu toto odvážné řešení může být i efektivní, pokud na zvuk na webu upozorníte dopředu anebo dáte návštěvníkovi možnost zvolit si, zda chce hlasového průvodce. Což může být dobré například i pro nevidomé.

7. 3D šabona
Ne každá 3D šablona vyřeší problém s dlouhým obsahem. Popravdě, v době psaní této knihy možná ani žádná taková šablona neexistuje. Skutečné 3D technologie pro web získávají teprve až v dnešní době dostatečnou podporu u prohlížečů webových stránek. Jedná se o 3D technologie jazyka CSS3, které stále nemají hotovou specifikaci, a pouštět se do tvorby 3D šablony může být dosti problematické, protože tak budete v podstatě průkopníky. Naštěstí pro vás je součástí této knihy i tvorba 3D šablon a jednu takovou šablonu dáme v této knize dohromady.

8. Animovaná šablona
Animovaná šablona je v podstatě totéž jako 3D šablona s tím rozdílem, že nebudete šablonu dávat do perspektivy a necháte načítat jednotlivý obsah ve 2D pomocí animace po najetí či kliknutí myší na tlačítka či specifickou část obsahu.

9. Responzivní obsah
Toto určitě už pár vývojářů napadlo. Většinou se obsah upravuje na šířku obrazovky kvůli mobilním telefonům. Nesmíme však zapomenout, že pokud máme tu možnost, tak je dobré upravit obsah i pro větší obrazovky anebo zoom (Ctrl+kolečko myši).

10. Podprahová a nepřímá sdělení
V dnešní době je to poměrně často využívaná v zahraniční politice. Využívá se v běžné komunikaci, ale i v televizi a reklamách. My se však zaměříme na její využívání na webu.

V případě, že jsme zahlceni informacemi, je pro každého z nás nejlepší přijímat další sdělení formou videa se zvukem. Videa jsou, jak všichni víme, směsice obrazů v kombinaci se zvukem. Známe třeba jako televizní vysílání. Přijímat informace za pomoci dobře natočeného dokumentu je asi v současné době ta nejefektivnější metoda jak předávat informace zahlceným lidem. V podstatě to v praxi funguje tak, že člověk jen sedne do křesla, nic nedělá a veškerou energii zaměří na příjem informací. A to bez námahy.

Pokud opustíme prostředí medií a internetu, tak dalším vhodným smyslem je hmat (možnost věci si ošahat). Prožitek z virtuální relaity formou her je dobrý způsob jak vstřebat další informace a to v mnoha ohledech lepší než televize. Vyžaduje ovšem více energie, zapojuje i další smysly a dochází tak k rychlejší únavě. Zážitky z her člověku však zůstanou déle v paměti a přijímá je opravdu velice rychle a hlavně ve velkém množství. Viděl jsem mladé lidi, kteří hráli bojové hry. Když se v reálném světě pustili třeba do airsoftu, chovali se poměrně rychle jako profíci a velitelé s nimi měli daleko méně práce. Navíc se aktivní hráči her stávali sami dobrými veliteli týmů.

V poslední řadě a nejúčinější metoda přijímání informací je do sdělování zapojit všechny smysl, tedy i čich. Toto zatím umožňuje jedině skutečný prožitek (zážitky, praxe apod.).

Zapojíme-li všechny smysli, rychleji se unavíme.

Pokud si myslíte, že jsem zašel s příklady moc daleko, není tomu tak. Spousta webových stránek právě nabízí nejeden zážitek či prožitek, a pokud tento zážitek natočíte na video a vložíte na web jako zkušennost někoho jiného, empatičtí lidé to budou často vnímat jako svůj vlastní zážitek a vaše sdělení přijmou velice rychle za své (lidé s omezenou schopností empatie musí vynaložit daleko větší úsilí dění pochopit, někdy skutečnost nechpopí vůbec a vytvoří si vlastní svět iluzí, či lží).

Naštěstí i v tomto případě bude něco chybět. Proto snad ještě pár století zůstanou skutečné prožitky nenahraditelné.

Vznikla nám otázka, na kterou je třeba si odpovědět. K čemu jsou školy? Školy, obdobně jako internet a knihy, mají obrovskou sílu v množství přijímaných informací, navíc školy mají i dozor nad pravdivostí oněch informací.

Nevýhoda škol a naopak výhoda internetu je v tom jaké informace jsou vám předkládány. Ve školách si můžete vybrat maximálně obor, a pak jsou vám vnucovány informace, a to i ty, které nepotřebujete, nechcete a v nejhoším případě ani nemusíte mít vrozené vlohy pro příjem některých z těchto informací. Na internetu a i v odborných knihách máte nesrovnatelnou svobodu volby v tom, co se budete učit.

Zkrátit obsah

Samotné články, či rozsáhlé romány většinou moc nezkrátíme a z pohledu webdesignera se můžeme jen dívat, jak náš úžasný návrh pod rukama uživatelů končí jako kilometrové rolovací cvičení pro ukazováček, tedy pokud nechceme obsah rozdělovat do několika stránek HTML. Což se také dělá, třeba u fotogalerií. Navíc toto řešení známe i z klasických knih. V knihách máme také více stran. Vzpomeňme si na nejeden komický film, kde písař chtěl číst pergamen a ten se rozbalil až na zem. Praktičtější je tedy mít několik listů.

Pro uživatele však můžeme udělat i něco dalšího, pokud chceme mít vše na jedné stránce. Dříve se nechal uživatel mučit dlouhým obsahem, než úplně dole našel možnost kliknout na tlačítko návrat.

Návratové tlačítko

html:

<a name="navrat"></a>
Začátek obsahu…
…
…
…
konec obsahu.
<a href="#navrat">navrat</a>

Později se to to řešení nahradilo animovaným JavaScriptovým tlačítkem, které se mohlo odhalit i dříve a po kliknutí spustit krásnou návratovou animaci.

Nevýhodou byl poměrně rozsáhlý složitý script, který si od sebe vývojáři vzájemně kopírovali, až se nakonec ani neví, kdo to vlastně vymyslel. Určitě bude exitovat několik variací, a tudíž i spousta tvůrců.

Animované návratové tlačítko

html:

Začátek obsahu…
…
…
… konec obsahu.
<a href="#" id="navrat" >navrat</a>

css:

#navrat {
position: fixed;
bottom: 20px;
right: 20px;
}

jQuery:

$(document).ready(function(){
$("#navrat").hide(0);
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#navrat').fadeIn(0);
} else {
$('#navrat').fadeOut(0);
}
});
$('#navrat').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});

Toto řešení přímo obsah nekrátí, ale můžeme usnadnit navigaci v dlouhém obsahu.

Owerflow

Pokud přesáhne obsah vámi zvolený prostor, můžete použít CSS vlastnost owerflow s hodnotou scroll, anebo auto. Je to efektiní, ale může vyvolat nechtěný designový defekt.

css:

.text {
height: 300px;
owerflow: scroll;
}

Vždy viditelné menu

Já osobně upřednostňuji nechat uživatelům obsah volně dlouhý, ale ponechat vždy viditelné menu za pomoci CSS vlastnosti position s hodnotou fixed.

css:

#menu {
position: fixed;
z-index: 100;
}

Samozřejmě toto řešení bude vyžadovat další stylování v závislosti na pozici vašeho menu, ale pokud si tuto techniku osvojíte a obohatíte o další prvky, tak může vzniknout docela pěkný efekt menu.

Problém může nastat v případě, používá-li váš web postranní menu, které má příliš mnoho odkazů. I toto se dá řešit, ale řešení bývají příliš komplikovaná a musí se používat i JavaScritp a proto je pro mnoho vývojářů jednodužší ponechat menu relativní.

V případě, že se vám povede udělat jen vodorovné menu, a věřte mi, že to jde i u hodně rozsáhlých webů, je toto řešení doslova pohádkové.

Příklad:

01. I přesto, že jsme dosáhli zápatí, menu s tlačítky je stále vidět. Do menu můžete vložit například i vyhledávání, pokud na nej budete mít místo. K vidění na instalatercb.cz/instalater.html.

U rozsáhlých webů se dá udělat vodorovné menu tak, že navrhnete a povolíte maximálně jen určitý počet nadřazených kategorií, a pokud takové kategorie neexitují, tak obsahu navrhnete jiné nové nadřazené kategorie.

Setkal jsem se s klienty, kteří trvali na rozsáhlém menu. V takovém případě tedy zvolíte menu vodorovné a relativn. Ale pokud máte nad návrhem plnou kontrolu, zkuste omezit kategorie na 6 − 8 a věřte mi, že to jde omezit bez obav až na 1− 3.

Fixní menu nemusí být nutně vodorovné, může být i svislé, ale dejte si pozor na menší obrazovky. O tomto tématu více v části Responzivní obsah.

Omezit, nebo nejlépe zrušit reklamu

S reklamou je to dost komplikované. Reklama na internetu je obvykle hlavní zdroj příjmů většiny webů. Reklamy na internetu je poměrně dost druhů. Od obyčejných odkazů po složité animované a cílené banery na konkrétního návštěvníka za pomoci cokis.

Méně invazivní druh reklamy je třeba formou doporučení nebo zmínky v obsahu či v článku. Taková reklama nemusí být ani spojená s odkazem a většina uživatelů si cíl reklamy najde sama. Tento druh reklamy nevadí, nenarušuje design a ani nepůsobí jako rušivý element na webu.

Naším cílem však není reklamu zrušit ani proti ní jakkoli bojovat. Naším cílem je zmenšit prostor, který reklama zabírá. Samozřejmě neplatí pro čistě inzertní weby a konec konců nemůžeme ani nařizovat našim klientům, aby reklamu, jakožto zdroj jejich příjmů, hromadně rušily.

Jde o to si pamatovat, že s ní musíme počítat, ale nepřehánět to, a pokud reklama vydělává jen nějakých pár korun měsíčně, zatímco celý web desítky tisíc, je na místě reklamu potlačit.

Reklama nemusí být jen externí, jako jsou bannery od Google, kdy se platí za proklik, ale i interní. Doporučení na akce, doporučení na nějaký nový produkt apod. I tato interní reklama by měla být decentní a neměla by zabírat celou obrazovku, jako tomu v současné době bývá formou sliderů.

I přesto, že se to stalo poměrně častým trendem, měli bychom zpozornět a uvědomit si, zda je daný slider natoli důležitý, aby tu byl.

Opět se jedná jen o doporučení, založené na dlouhém objektivním pozorování chování lidí. Nejde o žádný velký zločin, když zakryjete celou obrazovku nějakým „sranda mimozemšťanem,“ ale lidé ocení, pokud reklama zůstane jen jako decentní baner. Naopak, je to velice podobné vztahům či svádění (reklama je vlastně druh svádění).

Čím více se někomu vnucujete, tím více vás bude ignorovat, a nakonec to může dojít až k určitému pohrdání. Lepší je upoutat pozornost (stačí pohled), mít dobrou pověst a opačné pohlaví obratem projeví zájem.

Hodně záleží na mentalitě lidí i národů. Obecně však naštěstí platí, že globální informovanost a inteligence se zvedá. Asi na toto téma neexistuje žádná studie, ale i tak je přesně to příčinou toho, proč reklama na webu ztrácí svou účinnost. Člověk je prostě chytřejší.

Lidé daleko více ocení takt a rozum. Proč?

Platí zajímavé pravidlo:

Lidé si cení více toho, čeho je málo.

Omlouvám se těm, které jsem mohl urazit, ale podívejte se na to z jiného pohledu. Je pro nás přirozené nebýt taktní a rozumní. Nerodíme se rozumní. Rozum získáváme až s věkem a zkušenostmi.

Tzn. nemít rozum je důkaz mládí.

Zdělení formou obrazu

Sdělení formou obrazu je snad nejstarší neosobní (Neosobním sdělením je myšleno předávání informací jedním člověkem druhém, aniž jsou u předávání informace všichni fyzicky přítomni) způsob předávání informací vůbec.

Na vrcholné úrovni se jedná doslova o umění. Pro inspiraci si můžete projít galerie či staré hrady, zámky, sídla nebo muzea. Ideálně pokud budete mít i profesionálního průvodce, nebo někoho velice vnímavého z oboru. Třeba právě renezanční umělci uměli velice dobře zaznamenat děj, ba i příběh, na statický obraz.

V dnešní době nakonec ani nemusíme chodit moc daleko. Obrazová sdělení vidíme v už zmíněných komiksech. Popravdě, obrazová sdělení vidíme všude, ale komiks je, dle mého, nejodborněji zpracované sdělení čistě jen obrázky.

Samozřejmě jsou tyto příklady extrémy, které v dnešní době po vás snad ani nikdo chtít nemůže, ale i v současné době jsou tací, kteří jsou schopni několika po sobě jdoucími stučnými obrázky s lepšími smajlíky a bublinkami nádherně vystihnout nejen sdělení, ale i emoce.

Smajlíci a komiksové bublinky jsou dalším uměleckým stylem vhodným pro web. V této knize jej však budu popisovat jen okrajově.

Nám, obyčejným smrtelníkům (neumělcům), bude stačit vytvořit či sehnat z fotobank nebo přímo od fotografů fotografii, která co možná nejlépe vystihuje obsah webových stránek. V takovém případě jsou nejlepší přímo autentické fotografie. Pokud jste hodně kreativní, tak můžete i navrhnout, což se dělá velice často, nějakou vlastní grafickou kompozici vztahující se k danému tématu.

Příklad:

02. Jedná se o animovanou šablonu určenou k prodeji. K vidění na moderniweb.com/eshop/51-animovaná-webová-šablona-anonymous.html

Ještě tu nezaznělo, co je dašlím velice důležitým základním pravidlem, a ocení to i SEO specialisté:

Mít na jedné html stránce jen jedno sdělení, jeden článek, jedno téma...

Většině z vás to asi přijde samozřejmé, ale divili byste se, kolik webových stránek nedodržuje další základní pravidlo:

V jedné kategorii by měl být vždy obsah vztahující se jen k danému zaměření, oboru či tématu kategorie. Taktéž i k tomu odpovídající reklama.

Sdělení formou animací

Konečně se dostáváme k zajímavějšímu tématu. Animace jsou stále žhavou novinkou. Neplést s video animacemi nebo animovaným filmem. Na mysli jsou animace webové stránky za použití JavaScriptových efektů, flashových animací a možná lépe za použití CSS3 animací. CSS3 animace mají v současné době (v polovině roku 2015) ve světe téměř 99% podporu, ale i tak se příliš nevyužívají, což je škoda. Právě proto je tu tato knížka, aby vás s nimi seznámila.

V minulosti se hodně používali Fleshové animace. Tyto animace si neuměly příliš efektivně poradit s vyhledávacími roboty, pokud byly založeny čistě jen na flashi, a tak se bohužel takové stránky stávaly špatně dohledatelnými.

Pojďme si postupně představit nové animační vlastnosti jazyka CSS3.

KEYFRAMES

CSS3 vlastnost keyframes je základem, který určí podobu a průběh samotné animace.

Podpora:

IE 10+, Firefox, Chrome, Safari, Opera

css:

@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}

Pro spuštění animace to nestačí. Viz níže: Name a duration.

NAME / DURATION

CSS3 vlastnosti animation-duration a animation-name jsou základem, který samotnou animaci rozpohybuje.

css:

@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative; animation-name: jmeno_animace; animation-duration: 2s;
}

Právě se díváte na nejnutnější základ, který je třeba pro zprovoznění animace: jméno animace (animation-name) a doba trvání (animation-duration), přiřazené k nějakému elementu třeba <div>.

Samozřejmě animace bude fungovat i v případě, že uvedeme jen hodnoty 0% {left: 0px;} a 100% {left: 200px;}, jenomže když neuvedeme třetí hodnotu, např. 50%, bude chybět plynulý návrat do počátečního stavu.

Pozor! Animovaný element musí mít relativní, nebo absolutní pozici!

ANIMATION-TIMING-FUNCTION

CSS3 vlastnot animation-timing-function určí průběh animace.

css:

@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-timing-function: ease-in;
}

Přibyla nám vlastnost animation-timing-function s hodnotou ease-in, což znamená zpomalený rozjezd.

Seznam hodnot:

- ease

- linear

- ease-in

- ease-out

- ease-in-out

- cubic-bezier

ANIMATION-ITERATION-COUNT

CSS3 vlastnot animation-iteration-count určí kolikrát se má animace opakovat.

css:

@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-iteration-count: 2;
}

Kromě celých čísel můžete použít i hodnotu infinite, která znamená nekonečné opakování.

Celá čísla říkají, kolikrát se má animace zopakovat. Když tuto vlastnost neuvedete, animace se přehraje jen jednou.

ANIMATION-DIRECTION

CSS3 vlastnot animation-direction umožní pokročilý průběh animace.

Toto už bude trochu náročnější.
Pro přehlednost jsem začátek animace nechal zčervenat a konec prvního cyklu je žlutý.

css:

@keyframes pokrocili_prubeh {
0% {left: 0px; background: rgba(255, 0, 0, 1);}
10% {left: 0px; background: rgba(0, 128, 0, 0.5);}
50% {left: 200px;}
90% {left: 0px; background: rgba(0, 128, 0, 0.5);}
100% {left: 0px; background: rgba(255, 255, 0, 1);}
}
div:hover {
position: relative;
animation-name: pokrocili_prubeh;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-iteration-count: 2;
animation-direction: alternate;
}

Co se stalo?

1. Změnili jsme jméno animace (animation-name) na pokrocily_prubeh.

2. Upravil se procentuální průběh animace, kde se na začátku a na konci element nepohybuje, ale jen mění barvu pozadí (background).

3. Prodloužili jsme čas trvání animace (animation-duration) na 6 s.

4. Nastavili jsme opakování animace (iteration-count) na hodnotu 2 (animace se přehraje 2 x).

5. Přidali jsme vlastnost animation-direction s hodnotou alternate.

Co provedla hodnota alternate?

Přehrála celou animaci v druhém cyklu (opakování [iteration-count]) odzadu.
Jednoduše se animace nejprve přehrála od 0 % do 100 %, a po té od 100 % do 0 %.
Dá se také napsat, že každá sudá hodnota v intervalu vlastnosti iteration-count se přehraje od konce.

Poznámka:

Ve chvíli, kdy se animace přehrává v druhém cyklu od konce, dojde i k změně hodnoty ease-in na ease-out.

ANIMATION-DELAY

CSS3 vlastnot animation-delay umožní odložit spuštění animace.

css:

@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-delay: 1s;
}

ANIMATION-FILL-MODE

CSS3 vlastnost animation-fill-mode udává stav elementu před zahájením a po skončení animace.

css:

@keyframes zacatek_konec {
0% {left: 0px; background: rgba(255, 255, 0, 1);}
100% {left: 200px;}
}
div:hover {
position: relative;
animation-name: zacatek_konec;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: both;
}

Seznam hodnot:

- backwards (stav elementu před zahájením animace)

- forwards (stav elementu po skončení animace)

- both (obě předchozí hodnoty dohromady)

Hodnota both říká, že se má animace připravit k animování ve stavu 0 %, než uběhnou 2 s, které udává vlastnost animation-delay. Něco jako když nastartujete u formule motor a čekáte na start.

Dále hodnota both ještě ponechá element po skončení animace ve stavu 100 %, dokud nezrušíme :hover (nesjedeme myší z původního místa, kde element začal svou animaci).

Vážení čtenáři, právě jste dočetli ukázku z knihy Moderní Web.
Pokud se Vám líbila, celou knihu si můžete zakoupit v našem e-shopu.