🐘 👆🏻 🈹 CSS3 और जावास्क्रिप्ट का उपयोग करके फ्लिपबोर्ड एनीमेशन 🍁 📧 🎌

शुभ दोपहर निश्चित रूप से कई लोगों ने फ्लिपबोर्ड नामक एक आईओएस ऐप देखा है। इसकी सभी खूबियों के लिए, इसने मुझे अपने मनोरंजक फ्लिप एनिमेशन के साथ सबसे पहले खुश किया। यह विचार आपकी साइट के लिए विशेष रूप से जावास्क्रिप्ट और CSS3 में कुछ समान लागू करने के लिए पैदा हुआ था।

इस स्थिति में, मैंने CSS3 संपत्ति परिवर्तन का उपयोग किया: रोटेट 3 डी (...), जिसमें हार्डवेयर ग्राफिक्स त्वरण के लिए समर्थन की आवश्यकता होती है और केवल क्रोम 16+ में पर्याप्त रूप से काम करता है, इसलिए मैंने सभी आवश्यक गुणों को -webkit- उपसर्गों तक सीमित कर दिया। अनुचित मापदंडों वाले उपयोगकर्ताओं के लिए उत्पादन में, मैंने एनीमेशन को एक सरल के साथ बदल दिया।

यहाँ समाप्त परिणाम है:

लाइव डेमो

एचटीएमएल के साथ शुरू करते हैं। मैं एक सार्वभौमिक स्क्रिप्ट बनाना चाहता था, जो व्यावहारिक रूप से स्रोत html पर निर्भर नहीं करेगा, इसलिए इसमें वांछित वर्ग, चित्र और एनीमेशन शुरू करने के लिए लिंक के साथ केवल एक कंटेनर होता है:

<div class="flip-images"> <img src="./images/image_1.jpg"> <img src="./images/image_2.jpg"> <img src="./images/image_3.jpg"> </div> <a href="#" id='flip-one-more'>Flip</a>

स्क्रिप्ट अधिकांश भाग के लिए एक विनियामक कार्य करती है, लेकिन इसका पहला कार्य पार्सिंग है, चित्रों की url को एक सरणी में डालें (मैं सुविधा के लिए jQuery का उपयोग करता हूं):

 var image_index = 0; //   var images = parse_image_container(); function collect_images(){ var images = new Array(); $('.flip-images img').each(function(){ images.push($(this).attr('src')); $(this).remove(); }); return images; }

कलेक्ट_इमेज () फ़ंक्शन के काम के बाद, फ्लिप-इमेज क्लास के साथ एक खाली कंटेनर था, आपको इसे एक HTML टेम्पलेट के साथ भरना होगा जिसमें सभी आवश्यक परतें होंगी। हर बार, दो चित्रों की फ़्लिपिंग एनीमेशन के लिए आवश्यक होती है, एक सामने और एक पीछे, इसके अलावा, प्रत्येक चित्र को दो भागों में विभाजित करने की आवश्यकता होती है, साथ ही अधिक यथार्थवाद के लिए आपको छद्म छाया जोड़ने की आवश्यकता होती है।

 $('.flip-images').append("<div class='flip-container'>\ <div class='flip-top'>\ <div class='shadow-front'></div>\ <div class='front-image-top'></div>\ <div class='back-image-bottom'></div>\ <div class='shadow-back'></div>\ </div>\ <div class='back-image-top'></div>\ <div class='flip-bottom'>\ <div class='shadow-bottom'></div>\ <div class='front-image-bottom'></div>\ </div>\ </div>");

नतीजतन, फ्लिप-टॉप क्लास वाले कंटेनर को पलट दिया जाएगा, फ्लिप-बॉटम कंटेनर को ओवरलैप करते हुए।

अब यह आवश्यक कंटेनरों में आवश्यक चित्रों को विघटित करने के लिए बना हुआ है, यह भूमिका place_images () फ़ंक्शन को दी गई है:

 function place_images(){ var next_image_index = image_index+1; if(next_image_index==images.length){ next_image_index = 0; } var front_image = "<img src='"+images[image_index]+"'>"; var back_image = "<img src='"+images[next_image_index]+"'>"; $('.back-image-top').html("").append(back_image); $('.back-image-bottom').html("").append(back_image); $('.front-image-top').html("").append(front_image); $('.front-image-bottom').html("").append(front_image); }

बस दो कंटेनरों में image_index छवि डालें जो सामने की छवि के निचले और ऊपरी हिस्से के लिए जिम्मेदार हैं, और अगली छवि को पीछे की छवि के लिए कंटेनर में रखें।

स्क्रिप्ट में केवल एक चीज बची हुई है, एनीमेशन को शुरू करने के लिए लिंक पर एक एक्शन डालना है, लेकिन हम बाद में इससे निपट लेंगे। चलो CSS पर चलते हैं। मैं प्रत्येक कक्षा को अलग से चित्रित नहीं करूंगा, वे आदिम हैं, मैं केवल मुख्य बिंदुओं पर टिप्पणी करूंगा।

 .flip-images img{ width: 300px; height: 200px; } .flip-container{ width: 300px; height: 200px; position: relative; -webkit-perspective: 600px; } .flip-top{ height: 100px; overflow: hidden; width: 300px; } .flip-bottom{ position: relative; width: 300px; height: 100px; } /*   */ .front-image-top{ /*     */ display: block; -webkit-backface-visibility: hidden; /*    */ position: absolute; top: 0px; width: 300px; height: 100px; /* ,       */ overflow: hidden; /*  */ z-index: 900; } .front-image-bottom{ /*     */ height: 100px; width: 300px; overflow: hidden; vertical-align: bottom; position: absolute; z-index: -2; } .front-image-bottom img{ position: absolute; top: -100px; /*     ,    */ } /*   */ .back-image-top{ height: 100px; position: absolute; top: 0px; vertical-align: top; overflow: hidden; z-index: -1; } .back-image-bottom{ display: block; position: absolute; top: 0px; height: 100px; -webkit-transform: rotateY(180deg) rotateZ(180deg); /*       */ overflow: hidden; width: 300px; -webkit-backface-visibility: hidden; z-index: 800; } .back-image-bottom img{ position: absolute; top: -100px; } /**/ .shadow-top-front{ position: absolute; background: #000; z-index: 1000; width: 300px; height: 100px; -webkit-backface-visibility: hidden; opacity: 0; /*  ,    */ } .shadow-top-back{ position: absolute; top: 0px; width: 300px; height: 100px; background: #000; z-index: 1000; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); /*   ,       */ opacity: 1; /*  ,    */ } .shadow-bottom{ width: 300px; height: 100px; position: absolute; z-index: -1; background: #000; opacity: 0; }

इस स्तर पर, सभी चित्र जगह में हैं, जो सभी अवशेष एनिमेशन सेट करने के लिए है, इसके लिए हम कीफ्रेम संपत्ति का उपयोग करते हैं।

मुख्य एनीमेशन को फ्लिप कहा जाएगा और यह इस तरह होगा: छवि का ऊपरी हिस्सा गिरता है, निचले हिस्से से लड़ता है, थोड़ा ऊपर उड़ता है और फिर से नीचे गिरता है। तो यह सीएसएस में दिखेगा:

 @-webkit-keyframes flip { 0% { -webkit-transform: rotate3d(1,0,0, 0deg); } 50% { -webkit-transform: rotate3d(1,0,0, -180deg); } 60% { -webkit-transform: rotate3d(1,0,0, -155deg); } 70% { -webkit-transform: rotate3d(1,0,0, -140deg); } 100% { -webkit-transform: rotate3d(1,0,0, -180deg); } }

अंतराल और रोटेशन मूल्यों का चयन परीक्षण और त्रुटि द्वारा किया जाता है। छाया के लिए एनिमेशन समान रूप से बनाए गए हैं:

 @-webkit-keyframes shadowTopFront{ 0% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes shadowTopBack { 0% { opacity: 0.8; } 50% { opacity: 0; } 60% { opacity: 0.05; } 70% { opacity: 0.1; } 100% { opacity: 0; } } @-webkit-keyframes shadowBottom { 0% { opacity: 0; } 50% { opacity: 0.6; } 60% { opacity: 0.4; } 70% { opacity: 0.3; } 100% { opacity: 0.5; } }

यह उन वर्गों का वर्णन करता है जो एनिमेशन चलाते हैं:

 .flip { /*background: #ccc;*/ width: 200px; height: 100px; -webkit-transform-origin: bottom; -webkit-animation: flip 1s; /*    */ -webkit-animation-iteration-count: 1; /*    */ -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); /*        */ -webkit-transform: rotate3d(1,0,0, 180deg); /*   ,        0 */ } .shadow-top-front-animate{ -webkit-animation: shadowTopFront 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 0; } .shadow-top-back-animate{ -webkit-animation: shadowTopBack 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 0; } .shadow-bottom-animate{ -webkit-animation: shadowBottom 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0,0,1,0.5); opacity: 1; }

आइए जावास्क्रिप्ट पर वापस जाएं और आईडी फ्लिप-वन-और के साथ लिंक पर क्लिक करने के लिए कार्रवाई सेट करें। उपयुक्त कंटेनर पर क्लिक करके, आवश्यक चित्रों को प्रतिस्थापित किया जाना चाहिए, एनिमेशन वाले वर्गों को जोड़ा जाना चाहिए और छवि_इन्डेक्स चर को बढ़ाया जाना चाहिए।

 $('#flip-one-more').click(function(){ place_images(image_index); $('.flip-top').addClass('flip'); $('.shadow-top-front').addClass('shadow-top-front-animate'); $('.shadow-top-back').addClass('shadow-top-back-animate'); $('.shadow-bottom').addClass('shadow-bottom-animate'); image_index = image_index + 1; if(image_index==images.length){ image_index = 0; } return false; });

इस रूप में, सब कुछ काम करेगा, लेकिन हम एनीमेशन को केवल एक बार देखेंगे, लिंक पर बार-बार क्लिक करने के बाद, चित्रों को बस फिर से व्यवस्थित किया जाएगा। ऐसा इसलिए है क्योंकि CSS एनीमेशन एक बार की घटना है, इसे हमेशा अपनी मूल स्थिति में लौटाया जाना चाहिए। काश, आप केवल असाइन की गई कक्षाओं को हटाकर इस मामले में मदद नहीं कर सकते, लेकिन एनीमेशन को मूल एक पर वापस लाने का एक सरल, काफी कारगर तरीका है। आपको उन ब्लॉकों को हटाने और फिर से जोड़ने की आवश्यकता है जिनके लिए एनीमेशन लागू किया गया था। परिणामस्वरूप, क्लिक के लिए फ़ंक्शन का अंतिम संस्करण निम्नानुसार है:

 $('#flip-one-more').click(function(){ flip_container = $('.flip-container'); new_flip_container = flip_container.clone(true); flip_container.before(new_flip_container); $("." + flip_container.attr("class") + ":last").remove(); place_images(); $('.flip-top').addClass('flip'); $('.shadow-top-front').addClass('shadow-top-front-animate'); $('.shadow-top-back').addClass('shadow-top-back-animate'); $('.shadow-bottom').addClass('shadow-bottom-animate'); image_index++; if(image_index==images.length){ image_index = 0; } return false; });

अब सब कुछ इच्छानुसार काम करता है। आप ज्यादातर मामलों में एक समान प्रभाव लागू कर सकते हैं, यह केवल सभी लोकप्रिय ब्राउज़रों द्वारा आवश्यक गुणों के समर्थन की प्रतीक्षा करने के लिए बनी हुई है।

आपका ध्यान देने के लिए धन्यवाद, मैं समझता हूं कि कोड आदर्श से बहुत दूर है, इसलिए मुझे रचनात्मक आलोचना सुनकर खुशी होगी।

डेमो

एक उदाहरण के साथ पुरालेख

युपीडी। मैंने उपसर्गों के साथ पैरामीटर जोड़ा -moz-, -ms- और -o- एक उदाहरण के रूप में, लेकिन यह केवल क्रोम में सही ढंग से काम करता है।

UPD2। यदि आपका उदाहरण Chrome 16+ में बग के साथ प्रदर्शित होता है, तो क्रोम में कई विकल्पों को चालू करने का प्रयास करें: झंडे, अर्थात्:
- सॉफ्टवेयर रेंडरिंग सूची को ओवरराइड करना
- GPU का उपयोग कर सभी पृष्ठों का प्रसंस्करण
- GPU द्वारा तेजी से प्रतिपादन

CSS3 और जावास्क्रिप्ट का उपयोग करके फ्लिपबोर्ड एनीमेशन

More articles: