2012-04-11 10 views
6

मैं उन पुराने घड़ियों के आधार पर फ्लिप-डाउन नंबरों के आधार पर एक साधारण एनीमेशन बनाने के लिए संघर्ष कर रहा हूं। मैं एक freebie PSD प्रीमियम पिक्सल पर पाया से नकल नीचे एक छवि कहा:एक jQuery rolodex- शैली घड़ी फ्लिप एनीमेशन कोडिंग?

flip-clock PSD

सबसे बड़ी समस्या मैं में सभी HTML/CSS में एक "flipping" एनीमेशन jQuery का उपयोग कर बनाने जा रहा है/जावास्क्रिप्ट चल रहा हूँ । मुझे मिला एकमात्र ट्यूटोरियल from this net tuts+ article है जो वास्तव में छवियों का उपयोग करता है। यह घड़ी के शीर्ष और निचले हिस्से को दो अलग-अलग छवि सेटों में विभाजित करता है और उन्हें प्रत्येक सेकेंड के लिए बदल देता है जो ...

यह विधि किसी वेबसाइट में यथार्थवादी नहीं है क्योंकि यह पाठकों के लिए कोई वास्तविक संदर्भ प्रदान नहीं करती है। मैं एचटीएमएल में कोड को कड़ी मेहनत करना चाहता हूं और पूरी तरह से jQuery के माध्यम से फ्लिपिंग एनीमेशन निष्पादित करना चाहता हूं - अधिमानतः पृष्ठभूमि टिकर बक्से को छोड़कर कोई छवि नहीं। या इसे एक और तरीके से रखने के लिए संख्या HTML में कोडित हैं लेकिन घड़ी स्वयं रोलोडेक्स-शैली बीजी छवियों की एक श्रृंखला है।

मुझे उम्मीद है कि मैंने इसे काफी समझाया है .. मैं कुछ दिनों से इस पर संघर्ष कर रहा हूं और मुझे ईमानदारी से इस स्क्रिप्ट से कैसे संपर्क करना है, इस बारे में कोई जानकारी नहीं है। हो सकता है कि ऊपर और नीचे हिस्सों को विभिन्न divs में विभाजित करके, प्रत्येक सेकंड के लिए आंतरिक संख्याओं को बदल दें? मैं jQuery में काफी अच्छी तरह से बंद हूं लेकिन मैं एनिमेशन पर कमजोर हूं।

किसी भी समर्थन के लिए अग्रिम धन्यवाद!

+3

शायद यह एक शुरुआत हो सकती है .. http://dabblet.com/gist/2360985 –

+0

@ ऑस्करब्रोमन नाइस, लेकिन ऐसा लगता है कि यह एक प्रयोगात्मक सुविधा है और अधिकांश संस्करणों में समर्थित नहीं है। –

+0

आईई (सामान्य के रूप में) को छोड़कर, सबसे अद्यतित ब्राउज़र इसका समर्थन करते हैं। –

उत्तर

0

मुझे लगता है कि मैं कुछ ऐसा करने का प्रयास करूंगा जहां टेक्स्ट ऊपर और नीचे के लिए डुप्लिकेट किया गया हो। फिर छवियों और सीएसएस का उपयोग केवल प्रत्येक आधे को उचित रूप से प्रदर्शित करने के लिए करें।

अगला चरण भ्रम पैदा करेगा कि पाठ छवि के साथ फ़्लिप हो रहा है। मुझे यकीन नहीं है कि आप इसे कैसे करना चाहते हैं। मुझे लगता है कि यह आकार और गति का मामला है। छवि के संबंध में पाठ का आकार और गति जिस पर यह नीचे के शीर्ष से फ़्लिप होती है।

एनीमेशन का अंतिम भाग अगले नंबर के साथ शीर्ष आधा तैयार है और पूरा आधा कतार पूरा होने पर है।

मेरे पास कोई वास्तविक कोड नहीं है जो मदद करेगा, लेकिन मुझे आशा है कि यह अवधारणा कुछ ऐसा काम करेगी जो काम करेगी।

संबंधित मुद्दे