javascript - Ako vytvorím rotujúce ozubené koleso pomocou CSS3 a jQuery?

Mám nasledujúcu stránku, ktorá je vo Flashi s otáčajúcimi sa ozubenými kolesami na pozadí:

http://thedrivepartnership.com/index.html

Chcel by som vytvoriť niečo podobné pomocou CSS a JavaScriptu - nevie niekto o nejakých príkladoch, ktoré by sa dali nájsť?

Odpoveď č. 1

Predpokladám, že to, čo by ste mohli urobiť, je vytvoriť kontajner, ktorý vyplní okno, a potom umiestniť svoje prevody do toho kontajnera.

Napríklad môžete umiestniť kontajner obsahujúci animáciu na vrch súboru s veľmi nízkym z-indexom, ktorý sa prispôsobí oknu a má pevnú pozíciu. Svoj obsah by ste umiestnili navrchu a predstierali, že práve vyšla CSS4 s podporou pre .avi pozadia. Len žartujem. Kód:

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

CSS pre kontajner animácie môže vyzerať takto:

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

Animácia založená na CSS funguje takto, ale s rôznymi prefixmi od dodávateľov:

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

A potom aplikujete animáciu takto:

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

Bez skriptovania animácie v rámci prvku canvas si myslím, že budete dosť obmedzení. Obzvlášť škálovanie animácie tak, aby vyhovovala rôznym rozlíšeniam, bude ťažké (možno nemožné?) s prísnym použitím CSS a HTML. Stále to však môže vyzerať dobre, takže možno to stále splní vaše potreby. Tiež, tam kde animácia nie je podporovaná, stále môžete mať cool pole ozubených koliesok na pozadí, alebo jednoducho použiť animáciu založenú na JavaScripte.

Zložil som základný príklad toho, ako by ste to mohli urobiť s CSS a HTML. Tu je to na celú obrazovku. Myslím, že sú tu ďalšie problémy... Toto je určite neúplné... Ale dúfam, že je to krok správnym smerom. Rovnaké metódy by ste mohli rozšíriť na viac prevodoviek, aby to viac pripomínalo vašu súčasnú stránku.

Ak by ste sa rozhodli ísť touto cestou (a nie som si istý, či ju odporúčam), bolo by najlepšie navrhnúť animáciu v rozlíšení, ktoré vyzerá dobre v rozmedzí približne od 800x600 až po možno 1400x100. Ak máte štatistiky, riaďte sa najbežnejšou veľkosťou okna vašich používateľov.

Odpoveď č. 2

Skúste to v Chrome. Toto je špecifické pre prehliadače webkit, Chrome a Safari. Nahraďte „-webkit“ za „-moz“ pre Mozillu a „-o“ pre Operu. Alebo to jednoducho odstráňte pre najnovšie verzie prehliadačov.

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

alebo

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