javascript - Bagaimana cara membuat roda gigi berputar dengan CSS3 dan jQuery?

Saya memiliki situs berikut yang menggunakan Flash dengan roda gigi yang berputar di latar belakang:

http://thedrivepartnership.com/index.html

Saya ingin membuat sesuatu yang serupa menggunakan CSS dan JavaScript - apakah ada yang tahu contoh seperti itu di luar sana?

Jawaban #1

Saya pikir yang bisa Anda lakukan adalah membuat sebuah wadah yang mengisi jendela, lalu menempatkan gir Anda di dalam wadah itu.

Misalnya, Anda bisa menempatkan sebuah wadah yang memuat animasi di bagian atas file dengan z-index yang sangat rendah yang sesuai dengan jendela dan memiliki posisi tetap. Anda menempatkan konten Anda di atasnya dan berpura-pura css4 baru saja muncul dengan dukungan untuk latar belakang .avi. Hanya bercanda. Kode:

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

CSS untuk wadah animasi mungkin terlihat seperti ini:

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

Animasi berbasis CSS bekerja seperti ini, tetapi dengan awalan vendor yang bervariasi:

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

Dan kemudian Anda menerapkan animasinya seperti ini:

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

Tanpa membuat skrip animasi di dalam elemen canvas, saya pikir Anda akan cukup terbatas. Terutama, mengubah skala animasi agar sesuai dengan resolusi yang berbeda akan sulit (Tidak mungkin?) dengan CSS dan HTML yang ketat. Namun, itu masih bisa terlihat keren, jadi mungkin masih memenuhi kebutuhan Anda. Selain itu, di tempat animasi tidak didukung, Anda masih bisa memiliki deretan roda gigi yang keren di latar belakang, atau cukup kembali ke animasi berbasis javascript.

Saya telah membuat contoh sederhana tentang bagaimana Anda bisa melakukannya dengan CSS dan HTML. Ini tampil dalam layar penuh. Ada masalah lebih lanjut yang saya pikir... Ini jelas belum lengkap... Tapi semoga ini langkah ke arah yang benar. Anda bisa memperluas metode yang sama ke lebih banyak roda gigi untuk lebih menyerupai halaman Anda saat ini.

Jika Anda ingin mengambil rute ini (Dan saya tidak yakin menyarankannya), sebaiknya desain animasi pada resolusi yang terlihat baik dalam kisaran sekitar 800x600 hingga mungkin 1400x100. Jika Anda memiliki statistik, ikuti ukuran jendela pengguna yang paling umum.

Jawaban #2

Coba ini di Chrome. Ini khusus untuk browser webkit, Chrome dan Safari. Ganti "-webkit" dengan "-moz" untuk Mozilla dan "-o" untuk Opera. Atau cukup hapus untuk versi browser terbaru.

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

atau

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