spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Matúš Koprda 21.2.2011
Hodnoť článok:
3 0

CSS3 Animácie: Lepšie než na Apple.com

Každý kopíruje Apple, len my, ťažkí developeri na zajtra.sk ho predbiehame. ;) Ukážeme si ako spraviť galériu produktov, ktorá sa bude cez CSS animovať nie len vo Webkitových browseroch.

Apple pred nedávnom vynovil svoju stránku a používateľov Safari a Chrome potešil drobným detailom - prehliadač produktov má peknučké animácie. My sa nenecháme zahanbiť nejakým Applom;) a ukážeme si ako spraviť niečo podobné v tomto malom úvode do CSS3 animácií. Ako bonus bude náš product browser fungovať aj v Opere a Firefoxe.


  • Banana

  • Pineapple

  • Orange

  • Peach

  • Apple™

  • Photoshop

  • Illustrator

  • InDesign

  • Fireworks

  • Premiere

  • Pilsner

  • Heineken

  • Guinness

  • Foster's

  • Hoegaarden

  • Longcat

  • Shortcat

UPOZRNENIE: Animácie budete vidieť v Chrome, Safari, Opere a Firefoxe 4

Ako fungujú CSS animácie?

Jedným z novších rozšírení štandardu CSS sú prechody (transitions). Ak sa zmení atribút (farba, pozícia, rozmery, tieň, veľkosť písma, ... ) HTML elementu, ktorý má zapnutú animáciu, prehliadač zabezpečí, aby bol prechod od pôvodnej hodnoty k novej plynulý. Zahrajte sa so živou ukážkou a hneď pochopíte o čo ide:

position: relative;
left: 0px;


position: relative;
left: 0px;
transition: left 1s ease;


position: relative;
left: 0px;
transition: left 2.3s linear;






#haluz {
transform: rotate(5deg);
transition: all 0.5s ease-in-out;
}

#haluz:hover {
transform: rotate(-20deg);
}

Potrebné CSS je priamo v bublinkách a ako vidíte, jediné, čo treba napísať je:
transition: <parameter na animovanie alebo all> <počet sekúnd> <typ prechodu>

Ok, ale prečo nepoužívať jQuery, keď umožňuje v podstate to isté? V prvom rade je s prechodmi minimum roboty. Do CSS napíšete jeden riadok a vec je vybavená. Druhý dôvod je, že prehliadače sú na "natívne" animácie viac optimalizované, vďaka čomu sú plynulejšie (hlavne v novom Firefoxe sú neskutočne plynulé). Na druhej strane je tu aj nevýhoda, že kým v Internet Exploreroch by sa jQuery aspoň ako tak trhane animovalo, s CSS3 prechodmi nepochodíte ani v najnovšom IE9.

Oproti jQuery môžete ešte ľahko vytvárať animácie s postupným oneskorením, napríklad ako v spomínanej galérii. Na to vám poslúži atribút transition-delay. Čo sa týka kompatibility, s píchodom Firefoxu 4 (vydanie je naplánované teraz vo februári), by CSS prechody mali byť podporované všetkými hlavnými prehliadačmi. Okrem IE.. ako inak.

Galéria produktov

Keď si pozornejšie všimnete animáciu, zistíte, že produkty v galérii sa animujú každý s iným oneskorením v závislosti od toho, či sa presúvate na stránku vľavo alebo vpravo. Budeme teda používať 2 animácie a animovať každý produkt zvlášť.

Základnú štruktúru tvoria na seba naskladané <ul> elementy predstavujúce stránky a v každom z nich sú <li> elementy reprezentujúce produkty. Viditeľné sú iba produkty na aktuálnej stránke a zvyšok je schovaný po bokoch.

Pri prepínaní stránok odsunieme aktuálne produkty na bok a z druhej strany prisunieme tie nové. Na pozadí sa deje prakticky to, čo aj vidíte s rozdielom, že treba navyše nastaviť správnu animáciu podľa smeru pohybu.

V CSS vyzerá táto sranda približne nasledovne (neriešime detaily vzhľadu):

.prod-browser ul { position: absolute; top: 0px; left: 0px; overflow: hidden; }
.prod-browser li { position: relative; left: 0px; }
.prod-browser .left li { left: -1000px; }
.prod-browser .right li { left: 1000px; }

/* produkty vľavo sa začnú hýbať ako prvé */
.prod-browser ul.leftfirst li { transition: all 0.5s ease; }
.prod-browser ul.leftfirst li:nth-child(2) { transition-delay: 0.05s; }
.prod-browser ul.leftfirst li:nth-child(3) { transition-delay: 0.1s; }
.prod-browser ul.leftfirst li:nth-child(4) { transition-delay: 0.15s; }
.prod-browser ul.leftfirst li:nth-child(5) { transition-delay: 0.2s; }

/* produkty vpravo sa začnú hýbať ako prvé */
.prod-browser ul.rightfirst li { transition: all 0.5s ease; }
.prod-browser ul.rightfirst li:nth-child(1) { transition-delay: 0.2s; }
.prod-browser ul.rightfirst li:nth-child(2) { transition-delay: 0.15s; }
.prod-browser ul.rightfirst li:nth-child(3) { transition-delay: 0.1s; }
.prod-browser ul.rightfirst li:nth-child(4) { transition-delay: 0.05s; }

S takýmto CSS štýlom stačí už len v Javascripte vhodne nastavovať jednotlivým stránkam kombinácie triedy s pozíciou (left, right alebo žiadna) a triedy s animáciou. Zoberme si príklad, že používateľ je na treťom slajde a chce sa prepnúť na druhý.

Posúvame sa z tretej stránky na druhú, t.j. všetko budeme presúvať doprava a teda budeme používať animáciu rightfirst. Aktuálnemu tretiemu slajdu najprv nastavíme triedu animácie rightfirst a počkáme 1 ms, aby sa prehliadač spamätal. Následne mu pridáme triedu s pozíciou right, ktorá posunie produkty o 1000 pixelov vpravo, mimo viditeľného priestoru.

Teoreticky by malo fungovať aj keď nastavíme rightfirst a right naraz, ale v praxi animácie blbnú, takže, bohužiaľ, nezostáva nič iné len používať milisekundové oneskorenie. Druhá vec, čo v tomto momente spravíme je, že presunieme produkty druhého slajdu doľava (bez animácie), aby sa mohli v nasledujúcom kroku prisunúť zo správnej strany.

Teraz iba čakáme, kým sa produkty odpracú. Na mieste by bolo spomenúť, že animácia netrvá 0.5 sekundy, ako je nastavené, ale 0.5 + 0.2 sekundy, keďže ľavý produkt je oneskorený o 2 desatiny.

Nastavíme druhému slajdu animáciu rightfirst, opäť milisekundu počkáme a môžeme odstrániť posunutie left, čím sa produkty presunú do stredu.

A to je celé!

Javascript

Okrem posúvania stránok rieši Javascript ešte zopár drobností. Napríklad mení pozíciu zarážky, aby ukazovala na aktuálnu stránku. Pozície zarážky sú pevne definované, čo možno znie ako blbý nápad, ale predpoklad je, že názvy slajdov sa nebudú meniť často a ľahšie je zarážky zakaždým nastaviť ako prekomplikovávať kód výpočtom. Navyše Apple ich má tiež napevno. ;)

Druhý detail je blokovanie prepínania počas animácie. Určite na vás ako na developerov lepšie zapôsobí, ak niekde uvidíte takýto widget a napriek vašej snahe všade zúrivo klikať sa vám ho nepodarí zblbnúť. :) Predpokladám, že zdraví ľudia majú iné veci na robote ako sa snažiť oblbnúť widgety na stránkach, ale aspoň geekov to poteší.

var inProgress = false;
var current = 0;

function switchSlide()	{
	if (inProgress) return false;

	var index = $(this).index()-1; // ziadana stranka; index ide od 1, nie od 0
	if (index == current) return false;

	inProgress = true;

	$(".prod-browser .bottom a").removeClass("selected");
	$(this).addClass("selected");

	switch (index) {
		case 0: $(".prod-browser .bottom .caret").css("left", "173px"); break;
		case 1: $(".prod-browser .bottom .caret").css("left", "226px"); break;
		case 2: $(".prod-browser .bottom .caret").css("left", "280px"); break;
		case 3: $(".prod-browser .bottom .caret").css("left", "354px"); break;
	}
	var slides = $(".prod-browser ul");

	if (index < current) { // prehadzujeme na stranku vlavo = stranky sa hybu doprava
		slides[index].className = "left";
		slides[current].className = "rightfirst";
		setTimeout(function() { $(slides[current]).addClass("right").css("z-index", "1"); }, 1);

		setTimeout(function() {
			$(slides[index]).addClass("rightfirst");
			setTimeout(function() { $(slides[index]).removeClass("left").css("z-index", "2"); }, 1);
			setTimeout(function() { inProgress = false; }, 600); // trvanie animacie + najdlhsi delay
			current = index;
		}, 400);
	}
	else { // prehadzujeme na stranku vpravo = stranky sa hybu dolava
		slides[index].className = "right";
		slides[current].className = "leftfirst";
		setTimeout(function() { $(slides[current]).addClass("left").css("z-index", "1"); }, 1);

		setTimeout(function() {
			$(slides[index]).addClass("leftfirst");
			setTimeout(function() { $(slides[index]).removeClass("right").css("z-index", "2"); }, 1);
			setTimeout(function() { inProgress = false; }, 600);
			current = index;
		}, 400);
	}

	return false;
}

$(function() {
	$(".prod-browser .bottom a").click(switchSlide);
	$(".prod-browser ul:first").css("z-index", "2");
});

Rozdiely, hacky a download

Ako je možné, že Apple galéria funguje len na Webkitových prehliadačoch a naša aj na ostatných? Apple používa tzv. transition keyframes, kde si môžete definovať každý krok animácie. Vďaka nim má ich animácia "doraz" na konci. Naša animácia je o niečo menej fancy, ale zobrazí sa vo viacerých prehliadačoch.

To najhoršie na koniec. Nebolo by to CSS3, keby stačí jednoducho napísať, čo chcete. Veru nie... Okrem transition musíte zakaždým doplniť -moz-transition, -webkit-transition a -o-transition. Určite píšte aj transition bez prefixov, ak by sa náhodou niektorý výrobca odvážil vyjsť z experimentálnej fázy a začať používať atribút s normálnym menom.

V zdrojáku narazíte aj na IE hacky, ktoré nahrádzajú chýbajúce inline-blocky, tak sa nezľaknite. Kvôli bugom v IE musí byť spodný riadok s výberom slajdov pred samotnými slajdami, keďže za elementom s absolútnou pozíciou IE ignoruje margin. S týmto funguje galéria na všetkom od IE6 až po normálne browsery. :)

Zdrojáky [RAR]

Matúš Koprda Matúš Koprda

Momentálne robím internety a keď budem veľký, snáď sa dostanem aj k hrám alebo niečomu zmysluplnému. :) Mám rád minimalizmus, obskúrnu hudbu, všetko geeky a rýpanie sa v detailoch. Ďalšie kecy odo mňa nájdeš na brm.sk a na Twitteri @blade_sk.


Hodnoť článok:
3 0

14 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Patrik Pajdro Melišek 24.2.2013 20:17:36
Zdavim,
mam taku otazku, ked dam na obrazok odkaz na neaky skript, napr. v "Beers" kliknem na "Pilsner" tak sa mi skript zobrazi, ale cele menu mi skoci na zaciatok.
Vedel by mi tu niekto poradit ako upravit ten javascript tak, aby ked kliknem na obrazok, ako som uviedol napr. na "Pilsner" aby mi to menu zostalo na "Beers" a neskocilo na zaciatok?
V js sa nevyznam, tak ak by mi niekto vedel pomoct, bol by som vdacny :)
Diki
0 0 Rudiger Fiendcraftko Khan 11.6.2012 09:22:45
Prečo stále riešite IE...?? To neviete, že IE nie je prehliadač, ale nástroj na jeho stiahnutie..? :D :D :D
0 0 Peter Lauf (fb) 23.7.2011 00:00:00
Prečo na tom nebavi linkovanie ??
0 0 Lettenia Hee (fb) 3.5.2011 00:00:00
Mne sa to páči! Som rada že aj CSS ponúka takéto riešenia, keďže kým neovládam špičkovo flash a javascript a pod. tak sú pre mňa niektoré veci nemožné-neznáme
0 0 Belohorec Branislav (fb) 27.2.2011 00:00:00
Preto radsej Flash
0 0 Jozko Hruska (fb) 23.2.2011 00:00:00
Mna zarazaju 2 veci
1. Preco ludia neupgraduju browser: ".. a naco?" vsak 99% stranok im funguje. Za to mozu predovsetkym programatori resp. ludia ktori ich vedu. Keby sa vsade nastavilo ze strnku v IE6 a starsich a inych zastaralych nepodarkoch vobec nezobrazi uz by ludia mali dovod stiahnut si novsiu verziu.
2. Preco programatori pouzivaju nestandardizovane "features" ktore podporuje len cast prehliadacov resp. k nim neexistuje v inom prehliadaci alternativa? Ako take nieco mozete predat?
0 0 Robert Murarik (fb) 21.2.2011 00:00:00
A to neviete že internet je to modré e, čo by ostatný potom robili keby ho nebolo
0 0 Samuel W. Kolesar (fb) 21.2.2011 00:00:00
No ty vole! toto je super
0 0 Peter Širka (fb) 21.2.2011 00:00:00
IE brzííííí strašne web, mám pocit že v MS to robia naschvál, predstavte si svet bez IE, čo by teraz bolo na webe - záverečná - zemreli by sme VŠETCI. Predpokladám, že takéto niečo budeme môcť použiť až o rok.
0 0 Miroslav Sopko (fb) 21.2.2011 00:00:00
síce absolutne nerozumiem ako ste to urobili, ale je to úžasné ;-)
0 0 Miroslav Paganík (fb) 21.2.2011 00:00:00
dobra praca :)
0 0 Martin Richie Sihelsky (fb) 21.2.2011 00:00:00
Kedy konecne ludia pochopia, ze IE je pre dinosaurov? Zial, este stale je IE-pouzivatelov vacsina ... (ale vymieraju:))
0 0 Peter Kyle Cíger (fb) 21.2.2011 00:00:00
Velmi dobre
0 0 Fero Alian Volar (fb) 21.2.2011 00:00:00
Vemi pekne spracovane
Zajtra.sk > Programovanie > CSS/HTML > CSS3 Animácie: Lepšie než na Apple.com


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama