10 fantastiske eksempler på innovativ CSS3-animasjon
CSS3 har gitt en rekke estetisk imponerende nye funksjoner. Kanskje det morsomste av disse å leke med er CSS-animasjon, som lar deg utføre mange bevegelsesbaserte funksjoner som normalt er delegert til JavaScript. Bli med meg på min episke søken for å oppdage den kuleste, mest innovative og enda viktigere, nerdeste bruken av CSS-animasjon på nettet. Begynne!
Advarsel: Disse animasjonene er ganske spesifikke for nettlesere, så hvis du surfer i IE6, er det på tide å slutte å se Saved By The Bell, grøft oppringt forbindelse og last ned en moderne nettleser.
Roterende polaroider
Denne veiledningen viser deg hvordan du lager en fantastisk, animert haug med fotografier som bruker massevis av nye CSS3-kommandoer. Vi har en sterk start, denne vil være vanskelig å slå.
Klikk for å se demo
Matrisen
Følg den hvite kaninen .. feil jeg mener, sjekk ut denne fantastiske Matrix-animasjonen. Ikke helt sant for filmen (de enkelte karakterene endres ikke), men imponerende likevel. Ser på hvordan The Matrix er en av de beste sci-fi-flikkene gjennom tidene (jeg snakker om den første filmen, ikke de to andre katastrofene), denne kommer til å hoppe til toppen av listen vår og uten tvil bli der en stund til en verdig konkurrent kan bli funnet.
Klikk for å se demo
Trippy Spinning Column of Fun
Denne vanvittige animasjonen har en spinnsøyle som består av roterende rader med fargede bokser og tekst. Den samlede effekten er vanvittig kul og unektelig svimmel. Denne er litt for sprukket til å stjele torden fra The Matrix, men mesteren er fortsatt.
Tips: For økt sjanse for bevegelsessyke, bla deg opp og ned og riste hodet frem og tilbake mens du ser på animasjonen (vi er på ingen måte ansvarlig for ødelagt maskinvare du har etter å ha kastet lunsjen din over hele skrivebordet).
Klikk for å se demo
DJ Hero
Denne opplæringen kombinerer CSS3 og jQuery for å lage spinnende poster. Ved hjelp av kontrollene på skjermen kan du kontrollere hastigheten på postene eller ganske enkelt ta en plate med musen for å legge noen grove riper.
Virtuelle platespiller på en vintage trebakgrunn? Dette kan være en ganske stor konkurrent folk, denne debatten varmer opp. Gå videre, klikk på den. Du vet at du vil spille.
Klikk for å se demo
3D-animert kube
Denne lar deg bruke piltastene til å kontrollere rotasjonen av en 3D-kube. Først trodde jeg at det var ganske halt, men så skjønte jeg at du kunne holde nede piltastene for å få det til å frike seg ut og gå i turbo spinnende dødsmodus, noe som tydeligvis innløste det litt. Mega-stil poeng for å inkludere Sonic The Hedgehog også.
Klikk for å se demo
Rakett
Et rakettskip som uten tvil blir brakt til deg av underverkene i MS-Paint flyr over himmelen med en fantastisk fart. Slags ... I virkeligheten flyter den på en måte, transportert av et underlig, rektangulært kraftfelt med stiplede linjer. Rundt halvveis i animasjonen forsvinner raketten praktisk talt uten noen åpenbar grunn, så det er åpenbart en topphemmelig høyteknologisk stealth-rakett med bevæpnet en kappemekanisme for å avverge invaderende Vulcan-ødeleggere.
Ikke akkurat en seriøs konkurrent. Faktisk, hvorfor viste jeg til og med dette for deg? Og enda mer relevant, er det noe som heter en Vulcan-ødelegger, eller gjorde jeg det bare opp?
Klikk for å se demo
Vær
Snø
blader
La oss slå alle værstoffene ut på en gang, skal vi vel? Der det er en osteaktiv animasjon, er det også den uunngåelige fallende snøen, blader, regn, osv. Ikke misforstå, disse er ganske kule og kan føre til noen virkelig gode sesongens endringer på nettstedet. Imidlertid er disse henrettelsene, selv om de er godt laget, ikke så kreative med kontekst. Gi meg beskjed hvis du oppretter et nettsted som har gigantiske haglsteiner som ødelegger alt innholdet på siden, nå vil det være noe.
Klikk for å se snødemo
Klikk for å se Leaves Demo
Cover Flow
Denne animasjonen etterligner Apples coverflow ved hjelp av en hybrid CSS / jQuery-teknikk som DJ Hero-eksemplet ovenfor. Ved å etterligne Apple klarer denne seg bra i både de kule og nerdete kategoriene og gjør også en god jobb med å være nyskapende (dette er den eneste CSS3 Cover Flow-falsken jeg kunne finne). Vi har nok en utfordrer på hendene.
Klikk for å se demo
Star Wars Crawl
Det er det, spill over. Jeg vil takke de andre deltakerne for å ha spilt, men denne tar prisen. Det er åpningsscenen fra freakin 'Star Wars for å rope høyt ... i HTML og CSS (det er direktetekst du ser på lure). Jeg spør deg, hvilken bedre bruk av CSS-animasjon kan det være? Jeg fremholder at det ikke er noen. Stol på meg, vis dette til din nerdiest venn, og han vil på magisk vis bli en 4-åring på julemorgen.
Klikk for Epic View-demoen
(Safari + Snow Leopard påkrevd)
Konklusjon
For de av dere som synes denne konkurransen var rigget, har du rett. Jeg utgjorde konkurranseideen etter å ha funnet Star Wars-eksemplet bare for å fremheve hvor mye alt annet ble av sammenligning. Den virkelige hensikten med artikkelen er å vise deg at det ikke er slutt på de kule greiene du kan bygge med de relativt enkle animasjonsfunksjonene innebygd i CSS3.
Bruk kommentarene nedenfor for å gi oss beskjed om hvilken som var din favoritt. Hvis du kjenner til andre eksempler, kan du dele dem!
