Create a WebGL 3D landing page

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

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

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

शुरू करने के लिए पर्याप्त से अधिक होना चाहिए, और अपनी अगली परियोजनाओं को ईंधन देने के लिए बहुत कुछ होना चाहिए।

आपके शुरू करने से पहले, इस ट्यूटोरियल के लिए फाइलें डाउनलोड करें ।

01. मूल HTML सेटअप

शुरू करने के लिए, आपको अपने 3 डी दृश्य को देखने के लिए कहीं भी चाहिए। एक मूल HTML फ़ाइल सेट अप करें और तीन.जेएस के लिए एक लिंक शामिल करें। इसे या तो बाहरी रूप से होस्ट किया जा सकता है या से जोड़ा जा सकता है तीन.जेएस रिपोजिटरी यहां: । पृष्ठ को पूर्ण स्क्रीन बनाने के लिए कुछ सरल सीएसएस जोड़ें और किसी भी स्क्रॉल बार को हटा दें। अपनी फ़ाइल को अपने स्थानीय वेबसर्वर पर सहेजें, ताकि आप परीक्षण करने के लिए तैयार होने पर HTML की सेवा कर सकें। प्रारंभ करने के लिए निम्न कोड जोड़ें।

 ​​& lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; रिश्तेदार स्टूडियो & lt; / शीर्षक & gt;
& lt; स्क्रिप्ट src = "libs / three.j.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; शैली & gt;
एचटीएमएल, बॉडी {मार्जिन: 0; पैडिंग: 0; बहुत ज्यादा गोपनीय; }
& lt; / शैली & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
& lt; स्क्रिप्ट और जीटी;
// 3 डी कोड यहाँ जाता है
& lt; / स्क्रिप्ट & gt;
& lt; / शरीर & gt;
& lt; / html & gt; 

02. ग्लोबल वेरिएंट जोड़ें

आपको शेष कोड के संदर्भ में कुछ चर की आवश्यकता होगी। अब उन पर सेट करें। इसमें कणों को पकड़ने के लिए एक सरणी शामिल होगी, आपके टेट्राहेड्रॉन, माउस, रेकास्टर और रोशनी के लिए 'टी' चर।

अपने स्क्रिप्ट टैग के अंदर, निम्न कोड जोड़कर शुरू करें।

 // वार
var num = 30;
var ऑब्जेक्ट्स = [];
var Raycaster = नया तीन.raycaster ();
var माउस = नया तीन .vector2 ();
var प्रकाश, टी; [4 9]
  

   03. एक दृश्य, कैमरा जोड़ें और प्रस्तुत करें
  
  

   हमें पहले एक दृश्य जोड़ने की जरूरत है जिसमें हमारी सभी वस्तुएं होंगी। फिर हम एक कैमरा जोड़ते हैं जो इसके भीतर घूम सकता है, पैनिंग, टिल्टिंग और चल रहा है जैसा हमें चाहिए। पहली विशेषता दृश्य का क्षेत्र है। दूसरा पहलू अनुपात है। आप तीसरे और चौथे गुणों में निकट और दूर क्लिपिंग विमानों को भी परिभाषित कर सकते हैं। अंतिम, रेंडरर जोड़ें, जो दृश्य को कैनवास में चित्रित करता है।
  
  

   स्क्रिप्ट टैग में निम्न कोड जोड़ें।
  
  
 // कैमरा बनाएं
var कैमरा = नया तीन.PerspectiveCamera
(65, window.innerwidth / window.innerheight,
0.1, 1000);
camera.position.set (0.0,0.0,5);
// एक दृश्य बनाएँ
var दृश्य = नया तीन.सीन ();

// रेंडरर बनाएं
var renderer = नया तीन .webglrenderer (
{ANTIALIAS: TRUE});
renderer.setsize (window.innerwidth, खिड़की।
इनरहाइट);
document.body.appendchild (renderer.domelement
);
[4 9]
  

   04. एक स्पॉटलाइट जोड़ें
  
  

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

   स्पॉटलाइट जोड़ने के लिए अगला कोड जोड़ें।
  
  
 // एक स्पॉट लाइट बनाएं
लाइट = नया तीन। स्पॉटलाइट (0xccddff, .8);
light.position.set (0,0,5);
scene.add (प्रकाश); [4 9]
  

   05. एक एनीमेशन लूप जोड़ें
  
  

   एक एनीमेशन लूप, जिसे कभी-कभी 'रेंडर लूप' कहा जाता है, को प्रति सेकंड आदर्श रूप से 60 बार कहा जाता है। फिल्म प्रति सेकंड 24 फ्रेम (एफपीएस) पर चलती है और यह बिना किसी रुकावट के निरंतर गति को देखने में आंखों को चालित करने के लिए पर्याप्त तेज़ है। कंप्यूटर एनीमेशन में, हम कम से कम 30 एफपीएस के लिए लक्ष्य रखते हैं, लेकिन आदर्श रूप से 60fps। यह बहुत चिकनी दृश्य प्रदर्शन सुनिश्चित करता है भले ही फ्रेम समय-समय पर गिराए जाए।
  
  
हम इस एनीमेशन लूप को RequestAnimationFrame फ़ंक्शन पर बाध्य करते हैं, जो दो चीजें करता है। सबसे पहले, यह सुनिश्चित करता है कि ब्राउज़र अगले फ्रेम को प्रस्तुत करने के लिए तैयार है। इसका मतलब यह भी है कि एनिमेशन प्रतिपादन रोक सकते हैं जब उपयोगकर्ता अब उस ब्राउज़र टैब को नहीं देख रहा है,
  
  

   एनीमेशन लूप में दृश्य प्रस्तुत करने के लिए इस कोड को जोड़ें:
  
  
 वैर एनिमेट = समारोह () {
RequestAnimationFrame (एनिमेट);
renderer.render (दृश्य, कैमरा);
};

// एनीमेशन लूप शुरू करें
एनिमेट (); [4 9]
  

   06. एक जमीन बनावट लोड करें
  
  

   

    

     

      
       [9 1]
       [9 2]
       [9 3]
      
     
    
   
   
  

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

   आप कुछ भी चुन सकते हैं जो टाइल करेगा। इसका मतलब है कि यदि आप उन्हें पक्ष में रखते हैं तो किनारों को निर्बाध रूप से मिश्रित किया जाएगा। आप इसके लिए टाइल्स या पत्थर की तरह कुछ चुन सकते हैं। ध्यान दें कि आप इसके लिए लपेटने के लिए बनावट लपेट विकल्पों का उपयोग करते हैं। यह उदाहरण 12x12 दोहराने का उपयोग करता है। दृश्य का परीक्षण करने के बाद अपनी छवि के अनुरूप इसे समायोजित करें।
  
  
 // एक जमीन बनावट लोड करें
var बनावट = नया तीन.textureloader ()।
लोड ("संपत्ति / stone.jpg");
बनावट .waraps = texture.warapt = तीन।
दोहराना;
बनावट। Repeat.set (12,12);
[4 9]
  

   07. ग्राउंड सामग्री बनाएं
  
  

   तीन.जेएस में आपके उपयोग के लिए विभिन्न प्रकार के भौतिक प्रकार शामिल हैं। सामग्री को त्वचा के रूप में माना जाता है जो 3 डी ऑब्जेक्ट को कवर करता है। आप मूल सामग्री का उपयोग कर सकते हैं जो प्रकाश या फोंग या लैम्बर्ट शेडर सामग्री पर प्रतिक्रिया नहीं करते हैं जो करते हैं। आप अपनी खुद की कस्टम शेडर सामग्री का भी उपयोग कर सकते हैं। इस जमीन के लिए, एक भौतिक सामग्री का उपयोग करें। यह बहुत यथार्थवादी रूप है, बहुत अच्छी तरह से प्रकाश पर प्रतिक्रिया करता है। डिफ्यूज मैप के रूप में लोड किए गए बनावट का उपयोग करें, और यदि आपके पास इसके लिए कोई विशिष्ट बनावट नहीं है तो बंपमैप के रूप में भी।
  
  
 // ग्राउंड सामग्री बनाएं
सामग्री = नया तीन.शिफिसिकल सामग्री ({मानचित्र: बनावट, बंपमैप: बनावट}); [4 9]
  

   08. ग्राउंड मेष बनाएं
  
  

   

    

     

      
       
       [12 9]
       
      
     
    
   
   
  

   जब हम भौतिक (त्वचा) को ज्यामिति के साथ जोड़ते हैं जो 3 डी ऑब्जेक्ट के आकार को परिभाषित करता है, तो हम एक जाल बनाते हैं। जमीन के लिए, आपको एक साधारण योजना की आवश्यकता है। सामग्री शेडर और बनावट जटिल सतह विवरण के भ्रम पैदा करेगी।
  
  

   अपना ग्राउंड जाल बनाने के लिए निम्न कोड जोड़ें, एक अच्छे कोण पर घुमाएं और इसे कैमरे के नीचे रखें। यह देखने के लिए अपने कोड को चलाने के लिए सुनिश्चित करें कि यह कैसा दिखता है। इसे डायल करने के लिए आवश्यक किसी भी कोड को समायोजित करें।
  
  
 // ग्राउंड मेष बनाएं
var geometry = नई तीन. प्लेनबफ़रगेमेट्री
(100,100);
var ग्राउंड = नया तीन.मेश (ज्यामिति,
सामग्री );
ground.rotation.z = math.pi / 180 * -45;
ground.rotation.x = math.pi / 180 * -90;
groug.position.y = -2.0;
scene.add (जमीन); [4 9]
  

   09. एक उद्देश्य लोड करें
  
  

   इसके बाद, आप फोकल ब्याज के लिए एक केंद्रीय 3 डी ऑब्जेक्ट जोड़ देंगे। यह आपके दृश्य का सितारा है, इसलिए एक बनावट चुनें जिसे आप इसे कवर करना चाहते हैं। नोट: आप इस ऑब्जेक्ट को अत्यधिक प्रतिबिंबित करेंगे, इसलिए आप जिस बनावट को लोड करते हैं वह जमीन की तुलना में अधिक सूक्ष्म दिखता है।
  
  
 // लोड ऑब्जेक्ट बनावट
var बनावट = नया तीन.textureloader ()।
लोड ("संपत्ति / comcess_01_diffusion.jpg"); [4 9]
  

   10. एक पर्यावरण मानचित्र बनाएँ
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  

   इसके बाद, अपनी ऑब्जेक्ट के आस-पास एक वातावरण बनाएं जो इसकी सतह पर दिखाई देगा। यदि आप चाहें तो दृश्य के रूप में आप इसे दृश्य में भी जोड़ सकते हैं। वातावरण लोड करने के लिए, आप एक क्यूबेटेक्स्टूरलोडर का उपयोग करते हैं। आपके द्वारा उपयोग की जाने वाली छवियां छह छवियां होनी चाहिए जो आपके घन के अंदर एक निर्बाध छवि बनाने के लिए त्वचा को घन नक्शे कहा जाता है।
  
  
 var envmap = नया तीन.cubetextureloader ()
.setpath ('संपत्ति /')
.लोड (['px.jpg', 'nx.jpg', 'py.jpg', 'एनवाई।
jpg ',' pz.jpg ',' nz.jpg ']); [4 9]
  

   11. टेट्राहेडन जोड़ें
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  

   तीन.जेएस कई डिफ़ॉल्ट ज्यामिति के साथ आता है जिसका आप अपने दृश्यों के लिए उपयोग कर सकते हैं। कूलर में से एक टेट्राहेड्रॉन है। ऑब्जेक्ट के चेहरे की संख्या को परिभाषित करने के लिए यह त्रिज्या और 'विस्तार' पैरामीटर लेता है।
  
  

   निम्नलिखित कोड के साथ, अपने दृश्य में एक जोड़ें।
  
  
 // टेट्राहेड्रॉन बनाएं
var ज्यामिति = नया तीन।
Tetrahedronbuffergemetry (2,0);
var सामग्री = नया तीन.मेशिसिकल सामग्री
({मानचित्र: बनावट, envmap: envmap,
धातुता: 1.0, खुरदरापन: 0.0});
टी = नया तीन। हेश (ज्यामिति, सामग्री);
t.rotation.x = math.pi / 180 * -10;
scene.add (टी);
[4 9]
  

   12. रोटेशन और कैमरा लक्ष्य जोड़ें
  
  

  
  

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

   इस तरह दिखने के लिए अपने एनिमेट फ़ंक्शन कोड को अपडेट करें।
  
  
 RequestAnimationFrame (एनिमेट);
t.rotation.y - = 0.005;
camera.lookat (t.position);
renderer.render (दृश्य, कैमरा); [4 9]
  

   13. कण लूप जोड़ें
  
  

   इसके बाद, दृश्य में कुछ परिवेश कण जोड़ें। ये अग्रभूमि वीडियो लूप के साथ अच्छी तरह से मिश्रण करेंगे, आप बाद में जोड़ देंगे, साथ ही साथ इंटरैक्टिव हो। एकाधिक कण बनाने के लिए उपयोग किए जाने वाले कोड को पकड़ने के लिए एक सरल 'के लिए' लूप जोड़ें।
  
  
 के लिए (i = 0; i & lt; = num; i ++) {
// कण कोड यहां जाएगा
} [4 9]
  

   14. कण जाल बनाएँ
  
  

   करने के लिए पहली बात कण वस्तु बनाई है। आप इसे गोलाकार, sprites, या किसी भी वस्तु के साथ कर सकते हैं। अभी के लिए, उन्हें सरल क्षेत्रों बनाने का प्रयास करें।
  
  

   लूप के लिए अपने अंदर निम्न कोड जोड़ें।
  
  
 // नया जाल बनाएं
var geometry = नई तीन.SphereBuffergeMetry (.1,6,6);
var सामग्री = नया तीन.शिफिसिकल सामग्री ({envmap: envmap, metalness: 1.0});
var कण = नए तीन.श (ज्यामिति, सामग्री);
[4 9]
  

   15. यादृच्छिक स्थिति और दूरी निर्धारित करें
  
  

   कण केंद्रीय वस्तु को कक्षाबद्ध करेंगे और यादृच्छिक रूप से स्थित होना चाहिए ताकि वे जगह को अच्छी तरह से भर सकें और एक जैविक रूप हो। अनियमित स्थिति सेट करने के लिए निम्न कोड जोड़ें और फिर प्रत्येक कण के लिए निरंतर दूरी असाइन करें।
  
  
 // यादृच्छिक स्थिति सेट करें
particle.position.set (math.random () * 100.0 -
50.0,0.0, math.random () * - 10.0);
// कैल्क डिस्टनेस निरंतर और असाइन के रूप में
वस्तु के लिए
var a = नया तीन.vector3 (0, 0, 0);
var b = particle.position;
var d = a.distanceto (b);
particle.distance = d;
[4 9]
  

   16. कक्षाओं के लिए कोण सेट करें
  
  

   कक्षाओं को तेजी से एनिमेट करने के लिए, कक्षाओं के लिए कोण स्थिरांक जोड़ें, और उन्हें कण की संपत्ति के रूप में स्टोर करें। इन यादृच्छिक सामग्री कोण को परिभाषित करने के लिए निम्न कोड जोड़ें।
  
  
 // 2 यादृच्छिक लेकिन निरंतर कोण परिभाषित करें
रेडियंस में
particle.radians = math.random () * 360 * गणित।
पीआई / 180; // प्रारंभिक कोण
particle.radians2 = math.random () * 360 * गणित।
पीआई / 180; // प्रारंभिक कोण
[4 9]
  

   17. दृश्य और संग्रह में कण जोड़ें
  
  

   

    

     

      
       [24 9]
       
       
      
     
    
   
   
  

   अंत में, दृश्य में कण और ऑब्जेक्ट सरणी में जो आपने पहले परिभाषित किया था। यह बाद में सभी कणों को अलग कर देगा।
  
  
 // दृश्य में ऑब्जेक्ट जोड़ें
scene.add (कण);
// संग्रह में जोड़ें
objects.push (कण);
[4 9]
  

   18. कणों को एनीमेशन जोड़ें
  
  

   इसके बाद, आपको अपने कण वस्तुओं की स्थिति और घूर्णन को अद्यतन करने की आवश्यकता है। दृश्य केंद्र से निरंतर दूरी पर ये कक्षा। अपने एनिमेट फ़ंक्शन में निम्न कोड जोड़ें।
  
  
 के लिए (i = 0; i & lt; = num; i ++) {
var o = ऑब्जेक्ट्स [i];
O.Rotation.y + =। 01;
अगर (I% 2 == 0) {
o.radians + =। 005; o.radians2 + =। 005;
} अन्य {
o.radians - =। 005; o.radians2 - =। 005;
}
o.position.x = (math.cos (o.radians) *
o.distance);
o.position.z = (math.sin (o.radians) *
o.distance);
o.position.y = (math.sin (o.radians2) *
o.distance * .5);
}
[4 9]
  

   19. एक शीर्षक जोड़ें
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  

   इसके बाद, स्क्रीन के केंद्र में एक शीर्षक जोड़ें - अपने ब्रांड को पेश करने के लिए एक नाम। शीर्षक के लिए लेटर-स्पेसिंग एक महान सिनेमाई दिखता है। किसी भी फ़ॉन्ट / शैली का उपयोग करें, लेकिन प्रेरणा के लिए फिल्म शीर्षक संदर्भ देखें। हमारी सूची देखें
   
    नि: शुल्क फ़ॉन्ट्स
   
   हमारे पसंदीदा डाउनलोड करने योग्य फोंट की एक सूची के लिए।
  
  

   पहले अपने शीर्षक के लिए डोम तत्व जोड़ें। समापन बॉडी टैग से पहले स्क्रिप्ट टैग के बाद इसे जोड़ें।
  
  
 & lt; h1 & gt; रिश्तेदार स्टूडियो & lt; / h1 & gt;
[4 9]
  

   अपनी फ़ाइल के शीर्ष पर अपने स्टाइल टैग में अपने शीर्षक के लिए निम्न शैलियों को जोड़ें।
  
  
एच 1 {रंग: सफेद; स्थिति: पूर्ण; शीर्ष: 50%;
जेड-इंडेक्स: 100; चौड़ाई: 100%; पाठ-संरेखण: केंद्र;
ट्रांसफॉर्म: अनुवाद (0, -100%); फ़ॉन्ट परिवार:
'रेलवे', सैन्स-सेरिफ़; फ़ॉन्ट-वजन: 100;
लेटर-रिक्ति: 40 पीएक्स; पाठ-परिवर्तन:
अपरकेस; फ़ॉन्ट आकार: 16px; }
[4 9]
  

   20. एक वीडियो लूप जोड़ें
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  

   अपने लैंडिंग को गहराई बनाने के लिए एक अच्छी चाल एक छोटा वीडियो लूप जोड़ना है। आप धूम्रपान, धूल या कणों का उपयोग कर सकते हैं। ये व्यापक रूप से ऑनलाइन उपलब्ध हैं, या वीडियो की एक विस्तृत संख्या और फिल्म निर्माण पैकेज का हिस्सा हैं। अपने H1 टैग के बाद निम्न वीडियो टैग जोड़ें। ध्यान दें कि आप इसे 'म्यूट' और ऑटोप्ले पर सेट करना चाहते हैं। यह वीडियो को मोबाइल उपकरणों पर भी ऑनलाइन खेलने की अनुमति देगा।
  
  
 ​​& lt; वीडियो आईडी = "Videobacker" लूप src = "संपत्ति /
snow.mp4 "ऑटोप्ले म्यूट और जीटी; & lt; / वीडियो & gt;
[4 9]
  

   वीडियो को स्टाइल करने के लिए, अपने पृष्ठ के शीर्ष पर अपनी शैलियों में निम्न सीएसएस जोड़ें।
  
  
 ​​# विडियोोबैकर {पृष्ठभूमि आकार: कवर;
वस्तु-फिट: कवर; जेड-इंडेक्स: 9; अस्पष्टता: .3;
स्थिति: पूर्ण; शीर्ष: 0 पीएक्स; बाएँ: 0px;
चौड़ाई: 100vw; ऊंचाई: 100 वीएच; संक्रमण: 1 एस
अस्पष्टता आसानी से इन-आउट;
[4 9]
  

   21. अक्षर-बॉक्सिंग जोड़ें
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  

   वास्तव में अपने लैंडिंग पृष्ठ को सिनेमाई शैली देने के लिए, पृष्ठ पर कुछ अक्षर बॉक्स जोड़ें।
  
  

   इसके लिए div तत्व जोड़कर शुरू करें।
  
  
 ​​& lt; div class = 'बार-टॉप' & gt; & lt; / div & gt;
& lt; div class = 'बार-तल' & gt; & lt; / div & gt;
[4 9]
  

   फिर इन दो काले सलाखों के लिए शैलियों को जोड़ने के लिए अपनी शैलियों को अपडेट करें। आप इन शैलियों को अपने स्वाद और जरूरतों के लिए समायोजित कर सकते हैं।
  
  
 ​​.Bar-TOP {पृष्ठभूमि-रंग: काला;
ऊंचाई: 100px; स्थिति: पूर्ण; शीर्ष: 0;
बाएं: 0; जेड-इंडेक्स: 100; चौड़ाई: 100vw;}
.bar-नीचे {पृष्ठभूमि-रंग: काला;
ऊंचाई: 100px; स्थिति: पूर्ण; नीचे: 0;
बाएं: 0; जेड-इंडेक्स: 100; चौड़ाई: 100vw;} [4 9]
  

   
    यह आलेख मूल रूप से वेब डिजाइनर के अंक 287 में दिखाई दिया।
   
   
    
     मुद्दा 287 खरीदें
    
   
   
    या
   
   
    
     यहां सदस्यता लें
    
   
   
    ।
   
  
  

   
    अधिक पढ़ें:
   
  
  

   

    
     वेब घटक: अंतिम गाइड
    
   
   

    
     एक स्तरित लंबन प्रभाव कैसे बनाएं
    
   
   

    
     सीएसएस के माध्यम से एसवीजी में एनीमेशन कैसे जोड़ें
    
   
  [3 9 7]