2012-04-11 25 views
6

Aşağı açılır sayıları olan eski saatlere dayanan basit bir animasyon oluşturmaya çalışıyorum. Ben Prim Piksel üzerinde bulunan bir özgür PSD kopyalanmış aşağıdan bir resim ekledi:jQuery rolodex tarzı bir saat çevirme animasyonu kodlanıyor mu?

flip-clock PSD

I/JavaScript tüm HTML/CSS jQuery kullanan bir "saygısız" animasyon inşa ediyor içine çalıştırıyorum en büyük sorun . Bulduğum tek ders, aslında görüntüleri kullanan from this net tuts+ article. Saatin üst ve alt yarısını iki farklı görüntü kümesine ayırır ve her saniye için bunları değiştirir ...

Okuyucular için gerçek bir bağlam sağlamadığından, bu yöntem bir web sitesinde gerçekçi değildir. Sayıların HTML'ye kodlanmış olmasını ve yalnızca jQuery aracılığıyla çevirme animasyonunu gerçekleştirmesini tercih ederim. Tercihen arka plan kutuları dışında görüntü yok. Veya başka bir şekilde numaralarının numaralarının HTML'ye kodlanmasına rağmen saatin kendisi bir dizi rolodex tarzı bg görüntüsüdür.

Umarım bunu yeterince açıklamıştım .. Birkaç gün boyunca bunun üzerinde mücadele ettim ve bu yazıya nasıl yaklaşacağımı bilmiyorum. Belki de üst ve alt yarıları farklı divlara bölerek, geçilen her saniye için dahili sayıları değiştirebilir mi? JQuery'de oldukça iyiyim ama animasyonlarda zayıfım.

Destek için şimdiden teşekkür ederiz!

+3

Belki bu http://dabblet.com/gist/2360985 –

+0

@OscarBroman .. Güzel bir başlangıç ​​olabilir ama deneysel bir özellik olduğu ve en sürümlerinde desteklenmeyen benziyor olabilir. –

+0

En güncel tarayıcılar, IE (her zamanki gibi) dışında bunu destekler. –

cevap

0

Metnin üst ve alt kısımları için çoğaltıldığı bir şeyi yapmaya çalışacağımı düşünüyorum. Daha sonra her bir yarımı uygun şekilde görüntülemek için görüntüleri ve css'yi kullanın.

Sonraki adım, metnin görüntü ile saygısız olduğu yanılsamasını oluşturuyordu. Bunu nasıl yapmak istediğinden emin değilim. Bence boyutlandırma ve hız meselesi. Metnin görüntüye göre boyutlandırılması ve alt kısımdan dönme hızı.

Animasyonun son kısmı, bir sonraki sayı ile en üstteki yarıya hazırdır ve tamamlandığında alt yarıda sıraya girer.

Yardım edecek gerçek bir kodum yok, ama umarım bu kavram işe yarayacak bir şeydir.

İlgili konular