10 hämmastavat näidet uuenduslikust CSS3 animatsioonist
CSS3 on toonud kaasa mitmeid esteetiliselt muljetavaldavaid uusi funktsioone. Neist kõige toredam on CSS-animatsioon, mis võimaldab teil täita paljusid liikumispõhiseid funktsioone, mis tavaliselt delegeeritakse JavaScriptile. Liituge minu eepilise otsimisega, et leida CSS-i animatsiooni lahedam, kõige uuenduslikum ja mis veelgi olulisem - kõige tähtsam - veebis. Alusta!
Hoiatus: need animatsioonid on üsna brauseripõhised, nii et kui sirvite rakenduses IE6, on aeg lõpetada Saved By The Belli vaatamine, tõmmata sissehelistamisühendus ja alla laadida kaasaegne brauser.
Pöörlevad polaroidid
See õpetus näitab teile, kuidas luua hämmastavaid, animeeritud fotosid, kasutades palju uusi CSS3 käske. Oleme kindlalt stardis, seda on raske ületada.
Klõpsake Demo kuvamiseks
Maatriks
Jälgi valget jänest .. eksju ma mõtlen, vaadake seda vinge Matrixi animatsiooni. Mitte päris tõsi filmi suhtes (üksikud tegelased ei muutu), kuid sellegipoolest muljetavaldav. Nähes, kuidas The Matrix on kõigi aegade üks paremaid ulmevälgatusi (ma räägin esimesest filmist, mitte nendest kahest muust katastroofist), hüppab see meie loendi tippu ja jääb kahtlemata seal mõnda aega, kuni vääriline konkurent leitakse.
Klõpsake Demo kuvamiseks
Trippy ketramise veerg
Selles hullumeelses animatsioonis on keerlevad veerud, mis koosneb pöörlevatest värviliste kastide ja tekstiga ridadest. Üldine efekt on hullult lahe ja vaieldamatult peadpööritav. See on pisut liiga välja murtud, et The Matrixist äike varastada, kuid meister jääb alles.
Näpunäide: Suurenenud liikumishaiguse tõenäosuse korral liikuge animatsiooni vaatamise ajal üles ja alla ning raputage pead edasi-tagasi (me ei vastuta mingil juhul teie rikutud riistvara eest, mis teil pärast lõunaeine kogu lauale viskamist on).
Klõpsake Demo kuvamiseks
DJ kangelane
See õpetus ühendab CSS3 ja jQuery ketravate kirjete loomiseks. Ekraanil kuvatavate juhtelementide abil saate kirjete kiirust juhtida või lihtsalt hiirega haarata kirje, et teha mõned sobilikud kriimustused.
Virtuaalsed pöördlauad vintage puidust taustal? See võib olla üsna suur konkurent, see arutelu kukub. Minge edasi, klõpsake seda. Tead, et tahad mängida.
Klõpsake Demo kuvamiseks
3D animeeritud kuup
See võimaldab teil 3D-kuubi pöörde juhtimiseks kasutada nooleklahve. Alguses arvasin, et see on üsna hale, kuid siis mõistsin, et saate nooleklahve hoida all, et muuta see veidraks ja minna turbo pöörleva surma režiimi, mis ilmselgelt lunastas selle natuke. Megastiilis punktid ka Sonic the Hedgehogi kaasamise eest.
Klõpsake Demo kuvamiseks
Raketilaev
Rakettlaev, mille kahtlemata on teile MS-Paint imet toonud, lendab üle taeva hingematva kiirusega. Omamoodi ... Tegelikkuses hõljub see omamoodi, täisnurkse ja punktiirjoontega ristkülikukujulise jõuvälja kaudu. Umbes poole animatsiooni ajal kaob rakett ilma nähtava põhjuseta praktiliselt, nii et tegemist on ilmselgelt ülisalajase kõrgtehnoloogiaga raketiga, millel on relvastatud varjamisseade, et kaitsta sissetungivate vulkaanide hävitajaid.
Pole just tõsine konkurent. Tegelikult, miks ma seda sulle isegi näitasin? Ja mis veelgi olulisem, kas on olemas selline asi nagu Vulcani hävitaja või ma lihtsalt tegin selle üles?
Klõpsake Demo kuvamiseks
Ilm
Lumi
Lehed
Koputame kõik ilmaasjad korraga ära? Seal, kus toimub cheesy-animatsioon, on ka paratamatult langevat lund, lehti, vihma jne. Ärge saage minust valesti aru, need on üsna lahedad ja võivad viia tõeliselt suurepäraste hooajaliste veebisaidi muudatustega. Need konkreetsed hukkamised, olgugi et need on hästi läbi viidud, pole kontekstis siiski nii loovad. Andke mulle teada, kui loote veebisaidi, kus hiiglaslikud rahekihid hävitavad kogu lehe sisu, oleks see nüüd midagi.
Klõpsake lumeprogrammi kuvamiseks
Klõpsake lehtede demo kuvamiseks
Kattevoog
See animatsioon jäljendab Apple'i kattevoogu, kasutades hübriidset CSS / jQuery tehnikat nagu ülaltoodud DJ Hero näide. Apple'i jäljendades sobib see hästi nii lahedatesse kui ka nohikutesse kategooriatesse ning teeb uuendusmeelsuse nimel ka põgusa töö (see on ainuke CSS3 Cover Flow võlts, mida ma suutsin leida). Meil on käes veel üks kandidaat.
Klõpsake Demo kuvamiseks
Tähesõdade roomamine
See selleks, mäng läbi. Tänan teisi osalejaid mängimise eest, kuid see võtab auhinna. See on avanev stseen Freakini Tähesõdadest, et valjusti nutta ... HTML-is ja CSS-is (see on elav tekst, mida vaatate lollusele). Ma küsin, kuidas CSS-i animatsiooni paremini kasutada võiks? Ma väidan, et seda pole. Usu mind, näita seda oma nekriest sõbrale ja ta saab maagiliselt jõuluhommikul 4-aastaseks.
Klõpsake Epic View Demo
(Nõutav on Safari + lumeleopard)
Järeldus
Neile, kes arvavad, et see võistlus oli ebaõiglane, on teil õigus. Võistluse idee koostasin pärast Tähesõdade näite leidmist, et lihtsalt tuua esile, kui palju kõike muud võrdluseks tõmbas. Artikli tegelik eesmärk on näidata teile, et CSS3-sse sisseehitatud suhteliselt lihtsate animatsioonifunktsioonide abil pole lahedatele asjadele lõppu tehtud.
Kasutage allpool toodud kommentaare, et anda meile teada, milline oli teie lemmik. Samuti, kui teate mõnda muud näidet, palun jagage neid!
