🎞️ 😰 🐔 स्टार वार्स जेएस + CSS3 के उद्घाटन क्रेडिट 🔙 🏬 👴🏻

हेलो हब्रहाब।

30 दिनों के पाठ्यक्रम में हाल ही में पूर्ण किए गए लर्निंग जेकरी से प्रेरित और मैट्रिक्स कोड के रूप में एक छवि बनाने पर एक लेख, मैंने बेसबोर्ड के ठीक ऊपर अपने जेएस को एक स्तर पर अपग्रेड करने का फैसला किया, एक निमंत्रण अर्जित करने और कुछ दिलचस्प करने की कोशिश करें, कुछ जो बिना जलाए दिखाया जा सकता है। इच्छा से भूमिगत हो जाएगा, एक हब्र के रूप में इस तरह के एक परिष्कृत समुदाय के लिए।

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

एनीमेशन बनाने के लिए, Jquery को चुना गया (जो कि इस पूरे उपक्रम के लिए आवश्यक शर्तें के कारण) और अद्भुत CSS3 ट्रांसफॉर्म 3 डी गुणों के कारण आश्चर्य की बात नहीं है। क्रॉस-ब्राउज़र मिलान के लिए बैसाखी की तलाश में Google खोज लाइन में एक लंबे, असफल ब्राउजिंग के बावजूद उन्हें चुना गया था। यह विभिन्न ब्राउज़रों में समान कार्य को प्राप्त करेगा, यहां तक कि एक इंजन (वेबकिट) के ढांचे के भीतर भी यह संभव नहीं था। क्रोम फ्लैट स्क्रीन के निचले किनारे पर कैप्शन दिखाने से इनकार करता है, और वे जादुई रूप से केवल एनीमेशन के बीच में दिखाई देते हैं, जबकि सफारी सब कुछ सही ढंग से दिखाता है। फ़ायरफ़ॉक्स उल्लेखनीय रूप से धीमा हो जाता है, लेकिन एनीमेशन भी सही ढंग से प्रदर्शित होता है।

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

चलिए html मार्कअप से शुरू करते हैं

<!DOCTYPE html> <html> <head> <title>Star Wars Opening Crawl</title> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> JS… </script> </head> <body> <h3 id="intro">A long time ago, in a galaxy far,<br /> far away...</h3> <audio id="music" preload="auto" autobuffer controls> <source src="http://dl.dropbox.com/u/16979719/sw_music.ogg"> </audio> <img src="starwars-logo.png" width="100%"/> <div id="crawl"> <div id="text">   … </div> </div> <div id="theend">THE END</div> <div id="bg"></div> //  ,      </body> </html>

कुछ खास नहीं ...

जे एस

 function startIntro(){ $('#intro').fadeOut(1000); setTimeout(function (){ $('body').css('background', 'url(background.png)') //   var music = document.getElementById('music') if(music.canPlayType) //   audio.   Safari   JS   music.play() $('#logodiv').fadeIn(500); setTimeout(startCrawl, 1000); }, 1500) } function startCrawl(){ $('#logodiv').hide("scale",{}, 15000); // JQuery UI    setTimeout(function(){ $('#text').show() var now = 800; var translateY = setInterval( function(){ //     animation,   transform   . if($.browser.mozilla) var prefix = '-moz-' else var prefix = '-webkit-' $('#text').css( prefix + 'transform','rotateX(55deg) translateY('+now+'px) translateZ(300px)'); now = now - 2; if(now == -1800){ //    ,     clearInterval(translateY); $('#text').fadeOut(2000) $('#theend').delay(2000).fadeIn(2000); } }, 50); }, 9000) } $(function(){ setTimeout(function(){ $('#intro').fadeIn(1000); // Long time ago... }, 500) setTimeout(startIntro, 6000); })

ऑल JS सबसे नियमित जंकरी विधियों के साथ स्वाद के समय का नियमित सेट है। जैसा कि मैंने पहले कहा, मैंने जेएस के ज्ञान के उज्ज्वल पथ में प्रवेश किया है, इसलिए कृपया बकवास के लिए किक न करें।

चूंकि नंगे JQuery पैमाने की संपत्ति के साथ काम करना नहीं जानता है, एक JQuery UI तस्वीर की कमी को चेतन करने के लिए जुड़ा था, जो आपको प्रभाव में पैमाने का उपयोग करने की अनुमति देता है।

सीएसएस
यहां केवल एक छोटा हिस्सा दिलचस्प है।

 #crawl { width: 1000px; margin: auto; -webkit-perspective: 800px; -webkit-perspective-origin: center 350px; -moz-perspective: 800px; -moz-perspective-origin: center 350px; } #text { display: none; margin: auto; width: 600px; text-align: justify; -webkit-transform: rotateX(55deg) translateY(800px) translateZ(300px); -webkit-backface-visibility: visible; -moz-transform: rotateX(55deg) translateY(800px) translateZ(300px); -moz-backface-visibility: visible; }

वैज्ञानिक विश्लेषण पद्धति का उपयोग करके (-प्रोफ़िक्स-) रूपांतरित संपत्ति के मूल्यों को पाया गया।
एक्सएएनएक्स एक्स एक्स के सापेक्ष तत्व की ढलान को इंगित करता है (दूसरे शब्दों में, मॉनिटर के क्षैतिज विमान के सापेक्ष), TranslY वाई अक्ष के साथ ऑफसेट को निर्धारित करता है, ट्रांसलेट आपको लगता है कि जेड अक्ष के बारे में ऑफसेट निर्धारित करता है।

परिप्रेक्ष्य परिप्रेक्ष्य की गहराई को निर्धारित करता है, अवधारणात्मक-उत्पत्ति हमारे पाठ के सापेक्ष पर्यवेक्षक की स्थिति को इंगित करता है। इन गुणों को नोड्स के मूल तत्व के लिए निर्दिष्ट किया जाता है जिसके साथ हम काम करते हैं।

काम का उदाहरण *
* क्रोम फ्लैट स्क्रीन के नीचे कैप्शन दिखाने से इनकार करता है, और वे जादुई रूप से केवल एनीमेशन के बीच में दिखाई देते हैं, जबकि सफारी सब कुछ सही ढंग से दिखाता है। फ़ायरफ़ॉक्स उल्लेखनीय रूप से धीमा हो जाता है, लेकिन एनीमेशन भी सही ढंग से प्रदर्शित होता है।

Googling सामग्री की प्रक्रिया में, मैं बिना js के शुद्ध css पर शीर्षकों के कार्यान्वयन में आया। यहां

मैं इस सभी व्यवसाय को सामंजस्य बनाने, कोड में सुधार, उपयोगी बैसाखी और बहुत कुछ करने की सलाह सुनना चाहता हूं।

पी एस मैं ऑडियो तत्व के साथ सफारी के काम के बारे में भी लिखना चाहूंगा। ईमानदार होने के लिए, मैं थोड़ी देर के लिए जम गया, सांत्वना में देख रहा हूं:

"TypeError: 'अनिर्धारित' एक फ़ंक्शन नहीं है ('document.getEgetsTagName (' ऑडियो ')' का मूल्यांकन))।"

ऑडियो तत्व और Google के विनिर्देश के बीच भटकने के बाद, उन्होंने खुलासा किया कि सफारी सिस्टम में इंस्टॉल किए बिना ऑडियो का समर्थन नहीं करता है। यहां आपके पास स्टैंडअलोन एप्लिकेशन है।

स्टार वार्स जेएस + CSS3 के उद्घाटन क्रेडिट

More articles: