10 nevjerojatnih primjera inovativne CSS3 animacije
CSS3 je donio niz estetski impresivnih novih značajki. Možda najzabavniji od ovih za igranje je CSS animacija, koja vam omogućuje da izvodite mnoge funkcije temeljene na kretanju, koje su normalno delegirane na JavaScript. Pridružite mi se u mojoj epskoj potrazi da otkrijem zgodnu, najinovativniju i što je još važnije, najgluplju upotrebu CSS animacije na webu. Početi!
Upozorenje: Ove su animacije prilično specifične za preglednik, tako da ako surfate IE6, vrijeme je da prestanete gledati Saved By The Bell, otvorite dial-up vezu i preuzmite moderan preglednik.
Rotacioni Polaroidi
Ovaj vodič vam pokazuje kako stvoriti zadivljujuću, animiranu gomilu fotografija koristeći mnoštvo novih CSS3 naredbi. Krenuli smo snažno, ovaj će biti teško pobijediti.
Kliknite za prikaz demonstracije
Matrica
Slijedite bijelog zeca .. pogrešno, pogledajte ovu fantastičnu Matrix animaciju. Nije baš istinit za film (pojedinačni se likovi ne mijenjaju), ali ipak impresivan. Gledajući kako je Matrix jedan od najboljih znanstveno-fantastičnih iskustava svih vremena (govorim o prvom filmu, a ne o one druge dvije katastrofe), ovaj će skoknuti na vrh našeg popisa i bez sumnje će ostati tamo neko vrijeme dok se ne može naći dostojan natjecatelj.
Kliknite za prikaz demonstracije
Trostruki vrti stupac zabave
Ova luda animacija sadrži predenje stupa sastavljenog od rotirajućih redaka obojenih okvira i teksta. Ukupni učinak je ludo svjež i nesumnjivo vrtoglav. Ovaj je malo previše ispucan da bi ukrao grmljavinu iz Matrixa, iako ostaje prvak.
Savjet: Za povećanu šansu za gibanje, pomičite se gore-dolje i glavom pomičite prema naprijed i natrag dok gledate animaciju (ni na koji način nismo odgovorni za uništeni hardver koji posjedujete nakon što ste ručak bacili po stolu).
Kliknite za prikaz demonstracije
DJ Hero
Ovaj tutorial kombinira CSS3 i jQuery za stvaranje spinova zapisa. Pomoću zaslonskih kontrola možete kontrolirati brzinu zapisa ili jednostavno snimiti zapis mišem i tako položiti neke krupne ogrebotine.
Virtualni gramofoni na vintage drvenoj pozadini? To bi mogli biti prilično veliki konkurenti, ova rasprava se zagrijava. Samo naprijed, klikni ga. Znate da želite igrati.
Kliknite za prikaz demonstracije
3D animirana kocka
Ovaj vam omogućuje korištenje tipki sa strelicama za kontrolu rotacije 3D kocke. U početku sam mislio da je prilično hrom, ali onda sam shvatio da možete pritisnuti tipke sa strelicama da biste je izblijedjeli i prešli u turbo vrteći način smrti, koji je očito to otkupio. Mega stilovi bodova uključuju i Sonic The Hedgehog.
Kliknite za prikaz demonstracije
Raketni brod
Raketni brod bez sumnje koji vam donosi čuda MS-Paint leti nebom s velikom brzinom. Vrsta ... U stvarnosti, ona lebdi uzduž, prevožena čudnim, pravokutnim poljem s isprekidanim linijama. Otprilike na polovici animacije raketa praktički nestaje bez ikakvog razloga, tako da je očigledno najtajnija tajna visokotehnološka raketa s naoružanom prikrivajućom napravom za odbranu napadača Vulkana.
Nije baš ozbiljan konkurent. Zapravo, zašto sam vam ovo uopće pokazao? I još važnije, postoji li tako nešto kao Vulkanov razarač ili sam to samo izmislio?
Kliknite za prikaz demonstracije
Vrijeme
Snijeg
lišće
Ujednimo sve vremenske prilike u jednom potezu, zar ne? Tamo gdje je sirena animacija, tu je i neizbježni padajući snijeg, lišće, kiša itd. Nemojte me krivo shvatiti, to su prilično cool i mogu dovesti do nekih izvrsnih sezonskih izmjena web stranica. Međutim, ove egzekucije, iako dobro napravljene, nisu toliko kreativne s kontekstom. Obavijestite me ako stvorite web stranicu koja sadrži divovske tuče koje uništavaju sav sadržaj na stranici, to bi moglo biti nešto.
Kliknite za prikaz Demo demo snijega
Kliknite za pregled demonstracije odmora
Cover Flow
Ova animacija oponaša Appleov pokrovni tok pomoću hibridne CSS / jQuery tehnike poput gornjeg primjera DJ Hero. Imitirajući Apple, ovaj se pokazao uspješnim i u kul i neurednim kategorijama, a ujedno i čini inovativnim (ovo je jedini CSS3 Cover Flow koji sam uspio pronaći). Imamo još jednog kandidata u rukama.
Kliknite za prikaz demonstracije
Star Wars Crawl
To je to, igra je završena. Želio bih zahvaliti ostalim sudionicima na igranju, ali ovaj uzima nagradu. To je početni prizor iz freakin 'Ratova zvijezda za glasno plakanje ... u HTML-u i CSS-u (to je tekst uživo koji gledate budalom). Pitam vas, što bi bolje mogla koristiti CSS animaciju? Tvrdim da ga nema. Vjerujte mi, pokažite to svom neumornom prijatelju i on će se čarobno pretvoriti u četverogodišnjaka na božićno jutro.
Kliknite na Demo Epic View
(Potreban je safari + snježni leopard)
Zaključak
Za one od vas koji misle da je ovo natjecanje bilo krivo, u pravu ste. Ideju o natjecanju smislio sam nakon pronalaska primjera Ratova zvijezda samo da bih istaknuo koliko je sve ostalo blijedilo u usporedbi. Stvarna namjera članka je pokazati vam da nema kraja onim zgodnim stvarima koje možete graditi s relativno jednostavnim animacijskim značajkama ugrađenim u CSS3.
Koristite komentare u nastavku da nam javite koji vam je bio najdraži. Ako znate još neke primjere, podijelite ih!
