CSS3 3 डी ट्रांसफ़ॉर्मेशन क्लाउड्स

CSS 3D ट्रांसफ़ॉर्मेशन का उपयोग करके सुंदर 3D बादलों को कैसे आकर्षित किया जाए, इसका एक उदाहरण

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

अधीर के लिए: परिणाम क्या होगा

प्रविष्टि

इस लेख में, लेखक ने CSS3 ट्रांसफॉर्मेशन का उपयोग करके सुंदर 3 डी क्लाउड बनाने का तरीका बताने और दिखाने की कोशिश की। लेखक का यह भी मानना ​​है कि ये CSS 3 ट्रांसफॉर्मेशन काम कैसे करते हैं, इसकी एक बुनियादी अवधारणा शानदार नहीं होगी। यहाँ ट्यूटोरियल के लिए लिंक

यह ट्यूटोरियल कई सरल चरणों में विभाजित है। प्रत्येक चरण पिछले एक से कोड पर आधारित होता है और इसमें उदाहरणों के लिंक होते हैं।

यह अपने आप करो!

• एक दुनिया और एक कैमरा बनाएँ
• वस्तुओं को दुनिया से जोड़ें
• स्प्राइट्स को बादलों में जोड़ें
• जादू
• प्रस्तावना

Poooeehaaali!

1. एक दुनिया बनाएं और एक कैमरा जोड़ें

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

दृष्टिकोण पूरे दृश्य को कवर करता है और एक कैमरे के रूप में कार्य करता है। चूंकि सीएसएस 3 डी ट्रांसफ़ॉर्मेशन के लिए कोई कैमरा नहीं है, हम कल्पना करेंगे कि कैमरा ग्लास है जिसके माध्यम से हम उस दुनिया को देखते हैं जिसे हमने बनाया है। बादल हम अपनी दुनिया के अंदर लाठी से पैदा करेंगे और…।

दुनिया एक डिव ब्लॉक है जो कैमरा ब्लॉक के अंदर है और जिसमें बादल स्थित होंगे।

यह HTML मार्कअप का एक उदाहरण है जो हमें प्राप्त करना चाहिए

<div id="viewport" > <div id="world" ></div> </div> 

और शैलियों को हमारी दुनिया और कैमरे में जोड़ें। कैमरे के अंदर हमारे दृश्य (दुनिया) वाले ब्लॉक को रखना बहुत महत्वपूर्ण है, अन्यथा पूरे दृश्य को एक ऑफसेट के साथ खींचा जाएगा।

 #viewport { bottom: 0; left: 0; overflow: hidden; perspective: 400; position: absolute; right: 0; top: 0; } #world { height: 512px; left: 50%; margin-left: -256px; margin-top: -256px; position: absolute; top: 50%; transform-style: preserve-3d; width: 512px; } 

और कोड का एक सा: हम अपनी वस्तुओं को इनिशियलाइज़ करते हैं, मूसमोव इवेंट पर हुक करते हैं और एक अपडेट व्यू () विधि बनाते हैं

 /*   world  viewport  DOM  worldXAngle  worldYAngle   ,       d ,         */ var world = document.getElementById( 'world' ), viewport = document.getElementById( 'viewport' ), worldXAngle = 0, worldYAngle = 0, d = 0; /*         ,       -180  180 ,    */ window.addEventListener( 'mousemove', function( e ) { worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180; worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180; updateView(); } ); /* ,          d */ window.addEventListener( 'mousewheel', onContainerMouseWheel ); window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel ); function onContainerMouseWheel( event ) { event = event ? event : window.event; d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 ); updateView(); } /*  CSS3  transform   Changes the transform property of world to be  Z    d   X  worldXAngle     Y  worldYAngle  */ function updateView() { world.style.transform = 'translateZ( ' + d + 'px ) \ rotateX( ' + worldXAngle + 'deg) \ rotateY( ' + worldYAngle + 'deg)'; } 

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

उदाहरण

2. दुनिया में वस्तुओं को जोड़ें

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

 .cloudBase { height: 20px; left: 256px; margin-left: -10px; margin-top: -10px; position: absolute; top: 256px; width: 20px; } 

और हम createCloud () फ़ंक्शन को जोड़ते हैं, जो क्लाउड के लिए एक आवरण बनाएगा और इसे DOM और createCloud () फ़ंक्शन में जोड़ देगा, जो वास्तव में कई क्लाउड उत्पन्न करेगा।
हम पी वेरिएबल को भी जोड़ेंगे, जो कैमरे के परिप्रेक्ष्य के लिए ज़िम्मेदार है (एक संपत्ति जो वस्तुओं को बनाती है जो कैमरे से आगे हैं आकार में छोटे दिखते हैं)

  d = 0, p = 400, //  worldXAngle = 0, worldYAngle = 0; viewport.style.webkitPerspective = p; viewport.style.MozPerspective = p; viewport.style.oPerspective = p; /* objects      layers     (  a  ) */ var objects = [], layers = []; /*        */ function generate() { objects = []; layers = []; if ( world.hasChildNodes() ) { while ( world.childNodes.length >= 1 ) { world.removeChild( world.firstChild ); } } for( var j = 0; j <; 5; j++ ) { objects.push( createCloud() ); } } /*  placeholder              -256  256  */ function createCloud() { var div = document.createElement( 'div' ); div.className = 'cloudBase'; var x = 256 - ( Math.random() * 512 ); var y = 256 - ( Math.random() * 512 ); var z = 256 - ( Math.random() * 512 ); var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )'; div.style.webkitTransform = t; div.style.MozTransform = t; div.style.oTransform = t; world.appendChild( div ); return div; } 

.cloudBase क्लाउड कंटेनर को चिह्नित करने वाले सरल गुलाबी आयताकार हैं।

टिंट उदाहरण

3. स्प्राइट्स को बादलों में जोड़ें।

जंगल में दूर, और अधिक दिलचस्प! हम कुछ बिल्कुल तैनात .cloudLayer ब्लॉक जोड़ेंगे, जो प्रत्येक बादलों में स्प्राइट हैं।

 .cloudLayer { height: 256px; left: 50%; margin-left: -128px; margin-top: -128px; position: absolute; top: 50%; width: 256px; } 

आइए हमारे जेनरेटक्लाउड () फ़ंक्शन को थोड़ा बदलें, अब यह बादलों के अंदर स्प्राइट भी उत्पन्न करता है।

 function createCloud() { var div = document.createElement( 'div' ); div.className = 'cloudBase'; var x = 256 - ( Math.random() * 512 ); var y = 256 - ( Math.random() * 512 ); var z = 256 - ( Math.random() * 512 ); var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )'; div.style.webkitTransform = t; div.style.MozTransform = t; div.style.oTransform = t; world.appendChild( div ); for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) { var cloud = document.createElement( 'div' ); cloud.className = 'cloudLayer'; var x = 256 - ( Math.random() * 512 ); var y = 256 - ( Math.random() * 512 ); var z = 100 - ( Math.random() * 200 ); var a = Math.random() * 360; var s = .25 + Math.random(); x *= .2; y *= .2; cloud.data = { x: x, y: y, z: z, a: a, s: s }; var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )'; cloud.style.webkitTransform = t; cloud.style.MozTransform = t; cloud.style.oTransform = t; div.appendChild( cloud ); layers.push( cloud ); } return div; } 

उदाहरण

4. जादू

अंत में हम जादू करेंगे! हमारे पास परतों की एक सरणी है [], जिसमें हमारी दुनिया में प्रत्येक स्प्राइट का लिंक है। हमारे पास worldXAngle और worldYAngle भी हैं। अब हम यह सुनिश्चित करेंगे कि चैम्बर की उनकी सतह से कम लंबवत भी हमारे किसी भी प्रेत के लिए लंबवत है। दूसरे शब्दों में, स्प्राइट्स हमेशा हमारे सामने होंगे।

एक बार फिर, अपडेट () फ़ंक्शन को संपादित करें

 function update (){ for( var j = 0; j < layers.length; j++ ) { var layer = layers[ j ]; layer.data.a += layer.data.speed; var t = 'translateX( ' + layer.data.x + 'px ) translateY( ' + layer.data.y + 'px ) translateZ( ' + layer.data.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( ' + ( - worldXAngle ) + 'deg ) scale( ' + layer.data.s + ')'; layer.style.webkitTransform = t; layer.style.MozTransform = t; layer.style.oTransform = t; } updateView() ; } 

उदाहरण

प्रस्तावना

बस इतना ही, मुख्य काम लगभग पूरा हो चुका है। यह केवल हमारे स्प्राइट्स में बनावट जोड़ने और सीएसएस को साफ करने के लिए बनी हुई है (पृष्ठभूमि, फ़्रेम आदि को हटा दें)
बनावट को हर स्वाद के लिए बिल्कुल चुना जा सकता है: बादल, गड़गड़ाहट, टोस्टर ... यदि आप विभिन्न बनावट का उपयोग करते हैं, तो आप दिलचस्प प्रभाव प्राप्त कर सकते हैं!

वास्तव में इस कदम और अंतिम साफ संस्करण के लिए एक उदाहरण है

आप किसी भी क्रम में स्प्राइट जोड़ सकते हैं, या आप भेड़ और चरवाहों के रूप में बादल बना सकते हैं। कल्पना की गुंजाइश सीमित नहीं है।

इस पाठ के लेखक को उम्मीद है कि उन्होंने अपना समय व्यर्थ नहीं बिताया। और वह आपको प्रतिबंधों के बिना किसी भी परियोजना में इस कोड का उपयोग करने की अनुमति देता है। और वह the.spite (at) gmail.com (अंग्रेजी में, निश्चित रूप से) के पत्रों के खिलाफ नहीं है

अनुवादक से: यह इस तथ्य पर ध्यान देने योग्य है कि अंतिम संस्करण में लेखक requestAnimationFrame () फ़ंक्शन का उपयोग करता है, जो लूप में एनिमेशन खींचने का सही तरीका है।

सदस्यता लें, जैसे ...

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

UPD1: यह पता चला है कि एक बार Habré पर इस परियोजना का उल्लेख किया गया था। लिंक ।