10 Úžasné příklady inovativní animace CSS3
CSS3 přinesla řadu esteticky působivých nových funkcí. Snad nejzábavnější z nich je hraní s animací CSS, která vám umožní provádět mnoho pohybových funkcí normálně delegovaných na JavaScript. Připojte se ke mně na mé epické cestě a objevte nejúžasnější, nejinovativnější a hlavně nejnezkušenější použití animace CSS na webu. Začít!
Upozornění: Tyto animace jsou specifické pro konkrétní prohlížeč, takže pokud procházíte v IE6, je čas přestat sledovat Saved By The Bell, zrušit telefonické připojení a stáhnout si moderní prohlížeč.
Rotující Polaroidy
Tento tutoriál vám ukáže, jak vytvořit úžasnou animovanou hromadu fotografií s využitím tuny nových příkazů CSS3. Jsme na silném startu, tohle bude těžké porazit.
Kliknutím zobrazíte ukázku
Matice
Postupujte podle bílého králíka .. err, myslím, podívejte se na tuto úžasnou animaci Matrix. Ne úplně věrný filmu (jednotlivé postavy se nemění), ale přesto působivé. Když vidíme, jak je Matrix jedním z nejlepších sci-fi filmů všech dob (mluvím o prvním filmu, ne o těch dvou dalších katastrofách), tento skočí na vrchol našeho seznamu a nepochybně zůstane tam na chvíli, dokud se nenajde hodný konkurent.
Kliknutím zobrazíte ukázku
Trippy Spinning Column of Fun
Tato bláznivá animace obsahuje rotující sloupec tvořený rotujícími řadami barevných polí a textu. Celkový účinek je šílený chlad a nepopiratelně závratě. Tahle je příliš prasklá na to, aby ukradla hrom z Matrixu, ale vítěz zůstává.
Tip: Chcete-li zvýšit šanci na nemoc, pohybujte se nahoru a dolů a potřásejte hlavou dozadu a dopředu při sledování animace (nejsme v žádném případě zodpovědní za jakýkoli zničený hardware, který vlastníte, když hodíte oběd po celém stole).
Kliknutím zobrazíte ukázku
DJ Hero
Tento tutoriál kombinuje CSS3 a jQuery a vytváří spinningové záznamy. Pomocí ovládacích prvků na obrazovce můžete ovládat rychlost záznamů nebo jednoduše pomocí myši chytit záznam a položit nějaké dráždivé škrábance.
Virtuální gramofony na vinobraní dřevěné pozadí? To by mohl být docela velký konkurent, tato debata se zahřívá. Jděte do toho, klikněte na něj. Víte, že chcete hrát.
Kliknutím zobrazíte ukázku
Animovaná 3D kostka
Toto vám umožňuje ovládat rotaci 3D krychle pomocí kláves se šipkami. Nejprve jsem si myslel, že to bylo docela chromé, ale pak jsem si uvědomil, že můžete držet stisknuté klávesy se šipkami, aby se to vyděsilo a šlo do turbo spřádacího smrtícího režimu, který to očividně trochu vykoupil. Body mega stylu pro zahrnutí Sonic The Hedgehog.
Kliknutím zobrazíte ukázku
Raketová loď
Raketová loď vám bezpochyby přinesla zázraky MS-Paint létajících po obloze s úchvatnou rychlostí. Něco ... Ve skutečnosti se to nějak vznáší, přepravované podivným, obdélníkovým silovým polem s tečkovanými čarami. Asi v polovině animace zmizí raketa prakticky bez zjevného důvodu, takže je to zjevně přísně tajná high-tech stealth raketa s vyzbrojeným maskovacím zařízením, které odrazí invazivní vulkánské torpédoborce.
Ne úplně vážný konkurent. Proč jsem vám to vlastně ukázal? A ještě důležitější, existuje něco jako vulkánský torpédoborec nebo jsem to jen vymyslel?
Kliknutím zobrazíte ukázku
Počasí
Sníh
Listy
Vyrazíme všechny povětrnostní věci najednou, že? Tam, kde je kýčovitá animace, je zde také nevyhnutelný padající sníh, listí, déšť atd. Nechápejte mě špatně, jsou to docela v pohodě a mohlo by to vést k některým opravdu vynikajícím sezónním úpravám webových stránek. Tyto konkrétní popravy, byť dobře provedené, však nejsou tak kreativní s kontextem. Dejte mi vědět, pokud vytvoříte web, který má obrovské kroupy ničící veškerý obsah na stránce, to by teď bylo něco.
Klepnutím zobrazíte ukázku sněhu
Kliknutím zobrazíte ukázku listů
Cover Flow
Tato animace napodobuje krycí tok Apple pomocí hybridní techniky CSS / jQuery, jako je výše uvedený příklad DJ Hero. Tím, že napodobuje Apple, tento funguje dobře v chladných i nerdy kategoriích a také dělá bang up práci v tom, že je inovativní (to je jediný falešný CSS3 Cover Flow, který jsem mohl najít). Máme ještě další uchazeče v našich rukou.
Kliknutím zobrazíte ukázku
Star Wars Crawl
To je vše, konec hry. Ráda bych poděkovala ostatním účastníkům za hraní, ale tohle má cenu. Je to úvodní scéna z nadšených hvězdných válek pro hlasité volání ... v HTML a CSS (to je živý text, který se díváte na blázna). Ptám se vás, jaké lepší využití animace CSS by mohlo být? Tvrdím, že nic není. Věřte mi, ukažte to svému nerdiestnímu příteli a on se o Vánocích ráno magicky promění v čtyřletého.
Klikněte na ukázku Epic View
(Vyžaduje se Safari + Snow Leopard)
Závěr
Pro ty z vás, kteří si myslí, že tato soutěž byla zmanipulovaná, máte pravdu. Soutěžní nápad jsem vymyslel poté, co jsem našel příklad Star Wars, jen abych zdůraznil, jak moc všechno ostatní zbledlo porovnáním. Skutečným záměrem článku je ukázat vám, že není nic dobrého, co můžete stavět pomocí relativně jednoduchých animačních funkcí zabudovaných do CSS3.
Pomocí níže uvedených komentářů nám dejte vědět, která byla vaše oblíbená. Pokud víte i o jiných příkladech, sdílejte je prosím!
