javascript - Hvordan lager jeg et roterende tannhjul med CSS3 og jQuery?

Jeg har følgende nettsted som er i Flash med roterende tannhjul i bakgrunnen:

http://thedrivepartnership.com/index.html

Jeg vil gjerne lage noe lignende ved hjelp av CSS og JavaScript - vet noen om noen eksempler der ute?

Svar #1

Jeg antar at det du kan gjøre er å lage en beholder som fyller vinduet, og deretter plassere hjulene dine i den beholderen.

For eksempel kan du plassere en beholder som holder animasjonen øverst i filen med en veldig lav z-indeks som passer til vinduet og har en fast posisjon. Du vil plassere innholdet ditt ovenpå og late som om css4 nettopp kom ut med støtte for .avi-bakgrunner. Bare tuller. Kode:

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

CSS-en for animasjonsbeholderen kan se slik ut:

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

CSS-baserte animasjonen fungerer slik, men med forskjellige leverandørprefikser:

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

Og så bruker du animasjonen på denne måten:

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

Uten å lage et skript for en animasjon i et canvas-element, tror jeg du vil være ganske begrenset. Spesielt vil det være vanskelig (umulig?) å skalere animasjonen for å passe til forskjellige oppløsninger med streng CSS og HTML. Det kan fortsatt se kult ut, så kanskje det fortsatt dekker behovene dine. Dessuten, der animasjon ikke støttes, kan du fortsatt ha et kult utvalg av gir i bakgrunnen, eller ganske enkelt gå tilbake til JavaScript-basert animasjon.

Jeg har satt sammen et enkelt eksempel på hvordan du kunne gjøre det med CSS og HTML. Her er det fullskjerm. Det er flere problemer, tror jeg... Dette er definitivt ufullstendig... Men forhåpentligvis et skritt i riktig retning. Du kan utvide de samme metodene til flere gir for å ligne mer på din nåværende side.

Hvis du skulle ta denne ruten (og jeg er ikke sikker på om jeg anbefaler det), ville det være best å designe animasjonen i en oppløsning som ser bra ut i et område fra rundt 800x600 opp til kanskje 1400x100. Hvis du har statistikk, gå etter brukernes mest vanlige vindusstørrelse.

Svar #2

Prøv dette i Chrome. Dette er spesifikt for webkit-nettlesere, Chrome og Safari. Erstatt "-webkit" med "-moz" for Mozilla og "-o" for Opera. Eller bare fjern det for de nyeste nettleserversjonene.

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

eller

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}