2009-12-02 4 views
16

क्या किसी ने छवियों के साथ पेज फ्लिप प्रभाव को पुन: प्रयास करने का प्रयास किया है जैसे आप आमतौर पर एडोब फ्लैश में जावास्क्रिप्ट और एचटीएमएल 5 के कैनवास टैग के साथ देखते हैं?जावास्क्रिप्ट एचटीएमएल 5 कैनवास छवि कैसे करें "पृष्ठ फ्लिप" जैसा कि आप आमतौर पर फ्लैश में देखते हैं?

क्या कोई फ्रेमवर्क या JQuery प्लग-इन इस प्रकार के प्रभाव को करते हैं?

फ्लैश में पृष्ठ फ़्लिप आपको अनुरूपित पुस्तक पृष्ठ के कोने को पकड़ने और पृष्ठ को फ़्लिप करने की अनुमति देता है जैसे आप एक वास्तविक पुस्तक के पृष्ठ को फ़्लिप करेंगे।

मैं वास्तव में यह जानना चाहता हूं कि जावास्क्रिप्ट और एचटीएमएल 5 के कैनवास टैग के साथ यह कैसे करना है, लेकिन यह सुनिश्चित नहीं है कि कहां से शुरू करना है और न ही सूत्र क्या आवश्यक होंगे।

Example page flip in flash

उत्तर

16

आप HTML5 आधारित पेज Flipper का एक और (अच्छा एक) कार्यान्वयन पर एक नज़र हो सकता है।

+1

अपेक्षित फ्लिप प्रभाव jFlip के डेमो से काफी बेहतर है क्योंकि यह पृष्ठ पर एक छवि दिखाता है। –

+1

हाय, मैंने लगभग एक ही चीज़ लिखी है, लेकिन वेबजीएल के साथ - यह बेहद चिकनी है :) http://flipr.ivank.net –

8

आप jFlip कोशिश कर सकते हैं, यह एक jQuery प्लगइन है, यह नहीं आईई अनुरूप है, लेकिन मुझे लगता है कि यह आप के लिए एक समस्या नहीं है, क्योंकि आप एचटीएमएल 5 के लिए पूछ रहे हैं।

+1

विडंबना यह है कि पर्याप्त है इस पेज पर सभी लिंक के बाहर, jFlip केवल एक ही है कि मेरे लिए IE6 में काम किया था। – 10basetom

+1

@ 10basetom IEronically कुछ भी कह सकते हैं – rickyduck

1

यह एसवीजी के <foreignObject> तत्व और एसवीजी ट्रांसफॉर्म के साथ बेहतर है। This blog post by Mark Finkle में घूर्णन सामग्री पर कुछ जानकारी है क्योंकि आपको "पृष्ठ फ्लिप/टर्न" प्रभाव में करने की आवश्यकता होगी। जहां तक ​​मुझे पता है, केवल गीको 1.9+ और वेबकिट इसका समर्थन करता है। http://jpageflipper.codeplex.com/

यह वास्तव में अच्छा है और यह एक jQuery प्लगइन के रूप में लागू हो जाता है:

4

यहां एक HTML5 पृष्ठ फ्लिप ऐप है जिसे मैंने HTML5 के कैनवास तत्व & jQuery का उपयोग करके बनाया है। इसे RectoVerso कहा जाता है।

मैं भी इस पर दौड़ गया: http://romancortes.com/ficheros/page-flip.html
जो केवल CSS3 के साथ किया जाता है।

4

वहाँ एक स्पष्ट और जानकारीपूर्ण case study20 Things I Learned About Browsers and the Web में एक के आधार पर अपने स्वयं के पृष्ठ फ्लिप प्रभाव बनाने के बारे में है किताबें जो नरेंद्रकुमार से जुड़ी हुई हैं। अनुकरण करने के लिए यह एक महान कार्यान्वयन है, केस अध्ययन प्रासंगिक कोड नमूने के साथ स्पष्ट है, और यह पुस्तक विकसित करने वाली कंपनी फाई के लिए एक वरिष्ठ इंटरैक्टिव डेवलपर द्वारा लिखी गई थी।

8

यह एक, एक jQuery प्लगइन और सुंदर गंधा

http://www.turnjs.com/#home

+0

बहुत अच्छा जोड़ा, मुझे यह सबसे अधिक पसंद है – rickyduck

+0

यह मुफ्त नहीं है .. :( –

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