javascript - CSS3 ve jQuery ile nasıl dönen bir dişli çark oluşturabilirim?

Arka planda dönen çarklarla Flash olarak hazırlanmış aşağıdaki siteye sahibim:

http://thedrivepartnership.com/index.html

CSS ve JavaScript kullanarak benzer bir şey oluşturmak istiyorum - bunu bilen herhangi bir örnek var mı?

Cevap #1

Sanırım yapabileceğiniz şey, pencereyi dolduran bir konteyner oluşturmak ve ardından dişlilerinizi o konteynere yerleştirmektir.

Örneğin, animasyonu tutan bir kapsayıcıyı dosyanın üst kısmına, pencereye uyan ve sabit konumlu çok düşük bir z-indeksi ile yerleştirebilirsiniz. İçeriğinizi üstüne yerleştirirsiniz ve css4'ün .avi arka planlar için destek ile çıktığını varsayarsınız. Şaka yapıyorum. Kod:

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

Animasyon konteyneri için CSS şöyle görünebilir:

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

CSS tabanlı animasyon bu şekilde çalışır, ancak farklı satıcı önekleri ile:

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

Ve sonra animasyonu şöyle uyguluyorsunuz:

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

Bir canvas elementi içinde bir animasyon yazmadan, oldukça sınırlı olacağınızı düşünüyorum. Özellikle, animasyonu farklı çözünürlüklere uyarlamak, sıkı CSS ve HTML ile zor (İmkansız?) olacaktır. Yine de hala havalı görünebilir, bu yüzden belki de ihtiyaçlarınızı karşılar. Ayrıca, animasyon desteklenmeyen durumlarda, hâlâ arka planda havalı bir dişli dizisi kullanabilirsiniz veya sadece javascript tabanlı animasyona dönebilirsiniz.

CSS ve HTML ile bunu nasıl yapabileceğinize dair temel bir örnek hazırladım. İşte tam ekran hali. Sanırım daha başka sorunlar da var... Bu kesinlikle eksik... Ama umarım doğru yönde bir adım olur. Aynı yöntemleri daha fazla dişliye de uygulayarak mevcut sayfanıza daha çok benzeyebilir.

Eğer bu yolu seçerseniz (ve bunu önermediğimden emin değilim), animasyonu yaklaşık 800x600 ile belki 1400x100 civarında iyi görünen bir çözünürlükte tasarlamak en iyisi olur. Eğer istatistikleriniz varsa, kullanıcılarınızın en yaygın pencere boyutuna göre ilerleyin.

Cevap #2

Bunu Chrome'da deneyin. Bu, webkit tarayıcıları, Chrome ve Safari için özeldir. Mozilla için "-webkit" yerine "-moz" ve Opera için "-o" ile değiştirin. Veya en yeni tarayıcı sürümleri için sadece kaldırın.

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

veya

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