javascript - Jak stworzyć obracające się koło zębate za pomocą CSS3 i jQuery?

Mam następującą stronę, która jest wykonana we Flashu z obracającymi się trybikami w tle:

http://thedrivepartnership.com/index.html

Chciałbym stworzyć coś podobnego używając CSS i JavaScript - czy ktoś zna jakieś przykłady?

Odpowiedź #1

Przypuszczam, że mógłbyś stworzyć kontener, który wypełnia okno, a następnie umieścić w nim swoje koła zębate.

Na przykład, możesz umieścić kontener zawierający animację na górze pliku z bardzo niskim z-indexem, który dopasowuje się do okna i ma pozycję stałą. Umieścisz swoją zawartość na wierzchu i udajesz, że css4 właśnie wprowadził wsparcie dla teł .avi. Żartuję. Kod:

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

CSS dla kontenera animacji może wyglądać tak:

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

Animacja oparta na CSS działa w ten sposób, ale z różnymi prefiksami producentów:

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

A następnie zastosujesz animację w ten sposób:

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

Bez tworzenia animacji za pomocą skryptów w elemencie canvas, myślę, że będziesz dość ograniczony. Szczególnie skalowanie animacji, aby pasowała do różnych rozdzielczości, będzie trudne (niemożliwe?) przy ściśle używanym CSS i HTML. Nadal może wyglądać fajnie, więc może nadal spełniać twoje potrzeby. Również, tam gdzie animacja nie jest obsługiwana, w tle nadal możesz mieć fajną tablicę kół zębatych lub po prostu wrócić do animacji opartej na JavaScripcie.

Zebrałem podstawowy przykład, jak można by to zrobić przy użyciu CSS i HTML. Oto pełny ekran. Myślę, że są dalsze problemy... To zdecydowanie niekompletne... Ale mam nadzieję, że to krok we właściwym kierunku. Możesz rozszerzyć te same metody na więcej kół zębatych, aby bardziej przypominały twoją aktualną stronę.

Gdybyś miał wybrać tę trasę (a nie jestem pewien, czy to polecam), najlepiej byłoby zaprojektować animację w rozdzielczości, która wygląda dobrze w zakresie od około 800x600 do być może 1400x100. Jeśli masz statystyki, kieruj się najczęstszym rozmiarem okna użytkowników.

Odpowiedź #2

Spróbuj tego w Chrome. To jest specyficzne dla przeglądarek webkit, Chrome i Safari. Zamień „-webkit” na „-moz” dla Mozilli i „-o” dla Opery. Albo po prostu usuń to dla najnowszych wersji przeglądarek.

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

lub

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