ایک ویب جی ایل 3D لینڈنگ پیج بنائیں

Webgl 3D لینڈنگ پیج تخلیق آپ کے سامعین کے ساتھ ایک عظیم پہلا تاثر بنانے کا ایک طریقہ ہے. WebGl کے ساتھ، آپ براؤزر میں صحیح معیار بصری مواد فراہم کر سکتے ہیں. آپ اسے پلگ ان یا کسی خاص ضروریات کے بغیر کر سکتے ہیں. تمام جدید براؤزر موبائل آلات اور گولیاں کے ساتھ ساتھ ویب جی ایل کی حمایت کرتے ہیں. ویبگل آپ کو ناقابل اعتماد 3D مناظر بنانے کے قابل بناتا ہے. یہ طاقتور ویب وی آر کے تجربات، ویڈیو کو جوڑتا ہے، گرافکس شائقین کو فراہم کرتا ہے اور بہت کچھ.

اس سبق میں، آپ افسانوی فلم سٹوڈیو، رشتہ دار سٹوڈیو کے لئے لینڈنگ کا صفحہ بناؤ گے. تصور ڈرامائی اور نظریاتی طور پر مشغول ہے، جیسا کہ ایک پراسرار اعتراض ماؤس کی بات چیت کے جواب میں ظاہر ہوتا ہے اور گھومتا ہے. اس کے ارد گرد ذرات اس کے ارد گرد، رنگ تبدیل کرنے کے طور پر وہ منتقل. آپ اس انٹرایکٹو صفحہ کو تخلیق کرنے کے لئے ہر اقدامات کے ذریعے کام کریں گے، آپ کو آپ کے منصوبوں کے لئے اپنی اپنی تخلیق کرنے کی اجازت دی جاتی ہے (مزید حوصلہ افزائی کے لئے، ہماری پوسٹ سب سے بہتر پر دیکھیں لینڈنگ کے صفحات ).

آپ ویب کے لئے طاقتور 3D رینڈرنگ لائبریری صرف تین .js کی صرف خصوصیات میں شامل کریں گے. آپ اپنی تصاویر کو استعمال کرنے کے لئے بناوٹ کے طور پر استعمال کرسکتے ہیں. آپ کو سطح کی تفصیل کو بڑھانے کے لئے میش، نظم روشنی اور ساختہ استعمال کرنے کے بارے میں بھی سیکھیں گے، ماحولیاتی نقشے کا استعمال کیسے کریں، اور کس طرح گہرائی اور دلچسپی کے لئے تہوں کو شامل کرنے کے لئے.

شروع کرنے کے لئے کافی سے زیادہ ہونا چاہئے، اور آپ کے اگلے منصوبوں کو ایندھن کرنے کے لئے کافی مقدار میں ہونا چاہئے.

شروع کرنے سے پہلے، اس سبق کے لئے فائلوں کو ڈاؤن لوڈ کریں .

01. بنیادی ایچ ٹی ایم ایل سیٹ اپ

شروع کرنے کے لئے، آپ کو اپنے 3D منظر کو دیکھنے کے لئے کہیں کہیں ضرورت ہے. ایک بنیادی HTML فائل قائم کریں اور تین. js کے لئے ایک لنک شامل کریں. یہ یا تو بیرونی طور پر میزبان ہو سکتا ہے یا اس سے شامل کیا جا سکتا ہے تین.js ذخیرہ یہاں: . صفحے کی مکمل سکرین بنانے کے لئے کچھ سادہ سی ایس ایس شامل کریں اور کسی بھی کتاب کی سلاخوں کو ہٹا دیں. اپنی فائل کو اپنے مقامی ویب سرور میں محفوظ کریں، لہذا آپ کو ٹیسٹ کرنے کے لئے تیار ہونے پر HTML کی خدمت کر سکتے ہیں. شروع کرنے کے لئے مندرجہ ذیل کوڈ شامل کریں.

 ​​اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ عنوان اور GT؛ رشتہ دار سٹوڈیو اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ سکرپٹ SRC = "libs / تین.min.js" & gt؛ & lt؛ / script & gt؛
& lt؛ سٹائل اور جی ٹی؛
ایچ ٹی ایم ایل، جسم {مارجن: 0؛ پڈنگنگ: 0؛ چھپا ہوا رساو؛ }
& lt؛ / سٹائل اور جی ٹی؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
& lt؛ سکرپٹ اور جی ٹی؛
// 3D کوڈ یہاں جاتا ہے
& lt؛ / script & gt؛
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛ 

02. عالمی متغیرات شامل کریں

آپ کو باقی کوڈ بھر میں حوالہ جات کے لئے کچھ متغیر کی ضرورت ہوگی. اب ان کو مقرر کریں. اس میں ذرات منعقد کرنے کے لئے ایک صف، آپ کے Tetrahedron، ماؤس، رائیراسٹر اور لائٹس کے لئے ایک 'ٹی' متغیر ہے.

آپ کی سکرپٹ ٹیگ کے اندر، مندرجہ ذیل کوڈ کو شامل کرکے شروع کریں.

 // vars.
var num = 30؛
وار اشیاء = []؛
var raycaster = نئے تین.raycaster ()؛
وار ماؤس = نیا تین. ویکٹر 2 ()؛
وار روشنی، ٹی؛ 

03. ایک منظر، کیمرے اور رینڈر شامل کریں

ہمیں سب سے پہلے ایک منظر شامل کرنے کی ضرورت ہے جس میں ہماری تمام اشیاء شامل ہیں. پھر ہم ایک ایسی کیمرے شامل کرتے ہیں جو اس کے اندر اندر منتقل کر سکتے ہیں، پینٹنگ، ٹائلنگ اور منتقل کرنے کے طور پر ہمیں ضرورت ہے. پہلی خاصیت کا میدان ہے. دوسرا پہلو تناسب ہے. آپ تیسری اور چوتھی صفات میں قریب اور دور کلپنے والے طیاروں کو بھی وضاحت کرسکتے ہیں. آخری، رینجرر شامل کریں، جو اس منظر کو کینوس میں ڈرائنگ کرتا ہے.

سکرپٹ ٹیگ میں مندرجہ ذیل کوڈ شامل کریں.

 // کیمرے بنائیں
Var کیمرے = نیا تین. PerspeceCamera.
(65، ونڈو. innerwidth / window.innerheight،
0.1، 1000)؛
کیمرے. Position.set (0.0،0.0.5)؛
// ایک منظر بنائیں
Var Scene = نیا تین .scene ()؛

// رینجرر بنائیں
Var Renderer = نیا تین.Webglrender (
{antialias: سچ})؛
renderer.setsize (ونڈو. innerwidth، ونڈو.
اندرونی ہائٹ)؛
دستاویز .آپ .آپڈینڈچچل (رینجرز
)؛

04. ایک اسپاٹ لائٹ شامل کریں

اگلا، آپ کو منظر میں روشنی شامل کرنے کی ضرورت ہے. تین.js نقطہ، دشاتمک، محیط اور اسپاٹ لائٹس سمیت مختلف روشنیوں کے ساتھ آتا ہے. اس کے لئے ایک اسپاٹ لائٹ کا استعمال کریں. یہ آپ کو پوزیشن اور دشاتمک خصوصیات دے گا، اور اگر آپ بعد میں چاہتے ہیں تو آپ سائے کاسٹ کرنے کی اجازت دیتے ہیں.

اسپاٹ لائٹ کو شامل کرنے کے بعد مندرجہ ذیل کوڈ شامل کریں.

 // ایک جگہ کی روشنی بنائیں
روشنی = نیا تین. اسپاٹ لائٹ (0xCCDFF، .8)؛
light.position.set (0،0،5)؛
scene.add (روشنی)؛ 

05. ایک حرکت پذیری لوپ شامل کریں

ایک حرکت پذیری لوپ، کبھی کبھی ایک 'رینڈر لوپ' کہا جاتا ہے، مثالی طور پر فی سیکنڈ 60 بار کہا جاتا ہے. فلم فی سیکنڈ 24 فریموں پر چلتا ہے (ایف پی ایس) اور یہ آنکھوں کو چالنے کے بغیر مسلسل تحریک کو دیکھنے کے لئے کافی تیز رفتار ہے. کمپیوٹر حرکت پذیری میں، ہم کم از کم 30 FPS، لیکن مثالی طور پر 60fps کا مقصد ہے. یہ بہت ہموار بصری کارکردگی کو یقینی بناتا ہے یہاں تک کہ اگر فریم وقفے سے گرا دیا جاتا ہے.

ہم اس حرکت پذیری لوپ کو درخواست ناممکن فریم فنکشن پر باندھتے ہیں، جو دو چیزیں کرتی ہیں. سب سے پہلے، یہ یقینی بناتا ہے کہ براؤزر اگلے فریم کو فراہم کرنے کے لئے تیار ہے. اس کا مطلب یہ بھی ہے کہ حرکت پذیری رینڈرنگ کر سکتی ہے جب صارف اب براؤزر ٹیب کو دیکھتا ہے،

ایک حرکت پذیری لوپ میں منظر فراہم کرنے کے لئے اس کوڈ کو شامل کریں:

 var متحرک = تقریب () {
درخواست ناممکن فریم (متحرک)؛
Renderer.render (منظر، کیمرے)؛
}؛

// حرکت پذیری لوپ شروع
متحرک ()؛ 

06. زمین کی ساخت کو لوڈ کریں

اگلا، آپ منظر کے لئے ایک زمین بنائے گا. شروع کرنے کے لئے، آپ کو استعمال کرنے کے لئے ایک تصویر لوڈ کرنے کی ضرورت ہے. زمین اور دیواروں کی سطحوں کی طرح چیزوں کے لئے بناوٹ آپ کی اپنی تصاویر لینے اور احتیاط سے کناروں کو ایڈجسٹ کرنے کی حوصلہ افزائی کرکے تخلیق کیا جا سکتا ہے فوٹوشاپ سی سی . بس اس بات کا یقین کرو کہ وہ اچھی طرح سے ٹائل کرسکتے ہیں. جلدی شروع کرنے کے لئے، آن لائن عظیم لائبریریوں کے ساتھ ساتھ، ہماری پوری کوشش کریں مفت ساختہ .

آپ کسی بھی چیز کو اٹھا سکتے ہیں جو ٹائل کریں گے. اس کا مطلب یہ ہے کہ کناروں کو ہم آہنگی سے مل کر ملیں گے اگر آپ نے ان کی طرف سے ان کی طرف رکھی. آپ اس کے لئے ٹائل یا پتھر کی طرح کچھ منتخب کرسکتے ہیں. یاد رکھیں کہ آپ اس کے لئے ریپنگ کو دوبارہ کرنے کے لئے ساخت لپیٹ کے اختیارات کا استعمال کرتے ہیں. یہ مثال 12x12 بار بار استعمال کرتا ہے. ایک بار جب آپ منظر کی جانچ پڑتال کے بعد اپنی تصویر کو ایڈجسٹ کریں.

 // زمین کی ساخت کو لوڈ کریں
Var ساخت = نیا تین.TextureLoader ().
لوڈ ("اثاثوں / stone.jpg")؛
texture.wraps = scoture.wapt = تین.
بار بار
texture.repeat.set (12،12)؛

07. ایک گراؤنڈ مواد بنائیں

تین. js آپ کو استعمال کرنے کے لئے مختلف قسم کے مواد کی اقسام شامل ہیں. مواد کی جلد کے طور پر سمجھا جاتا ہے جو 3D اعتراض پر مشتمل ہے. آپ بنیادی مواد استعمال کرسکتے ہیں جو روشنی یا فونگ یا لیمبرٹ شادر مواد پر ردعمل نہیں کرتے ہیں جو کرتے ہیں. آپ اپنے اپنی مرضی کے مطابق شادر مواد بھی استعمال کرسکتے ہیں. اس زمین کے لئے، جسمانی مواد کا استعمال کریں. اس میں ایک بہت حقیقت پسندانہ نظر ہے، بہت اچھی طرح سے روشنی میں رد عمل. اگر آپ اس کے لئے مخصوص ساخت نہیں رکھتے تو آپ کو مختلف نقشے کے طور پر، اور ایک bumpmap کے طور پر بھری ہوئی بناوٹ کا استعمال کریں.

 // گراؤنڈ مواد بنائیں
مواد = نیا تین
  

   08. زمین کی میش بنائیں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   جب ہم جیومیٹری کے ساتھ مواد (جلد) کو یکجا کرتے ہیں جو 3D اعتراض کی شکل کی وضاحت کرتا ہے، ہم ایک میش بناتے ہیں. زمین کے لئے، آپ کو ایک سادہ منصوبہ کی ضرورت ہے. مواد shader اور ساخت پیچیدہ سطح کی تفصیل کی غلطی پیدا کرے گی.
  
  

   اپنے زمین کی میش بنانے کے لئے مندرجہ ذیل کوڈ شامل کریں، ایک اچھا زاویہ کو گھومنے اور اسے کیمرے سے نیچے ڈالنے کے لئے. اس کے بعد اپنے کوڈ کو چلانے کے لئے اس بات کا یقین کریں کہ یہ کیسے لگ رہا ہے. کسی بھی کوڈ کو ایڈجسٹ کریں جو آپ اسے ڈائل کرنے کی ضرورت ہے.
  
  
 // زمین کی میش بنائیں
وار جیومیٹری = نیا تین. پیپلینبیڈریج
(100،100)؛
وار گراؤنڈ = نیا تین. میش (جیومیٹری،
مواد)؛
ground.rotation.z = math.pi / 180 * -45؛
ground.rotation.x = math.pi / 180 * -90؛
ground.position.y = -2.0؛
منظر. (گراؤنڈ)؛ 
  

   09. ایک مقصد لوڈ کریں
  
  

   اگلا، آپ مرکزی دلچسپی کے لئے ایک مرکزی 3D اعتراض شامل کریں گے. یہ آپ کے منظر کا ستارہ ہے، لہذا آپ کو اس کا احاطہ کرنا پسند ہے. نوٹ: آپ اس اعتراض کو انتہائی عکاسی کریں گے، لہذا آپ یہاں استعمال کرتے ہوئے ساخت زمین سے کہیں زیادہ ٹھیک ٹھیک نظر ہے.
  
  
 // لوڈ آبجیکٹ ساخت
Var ساخت = نیا تین.TextureLoader ().
لوڈ ("اثاثوں / rock_01_diffusion.jpg")؛ 
  

   10. ماحول کا نقشہ بنائیں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   اگلا، آپ کے اعتراض کے ارد گرد ایک ماحول تخلیق کریں جو اس کی سطح پر عکاسی کی جائے گی. آپ اس منظر میں بھی منظر کے طور پر بھی شامل کر سکتے ہیں. ماحول کو لوڈ کرنے کے لئے، آپ کو ایک Cubetextureloader کا استعمال کرتے ہیں. آپ کے استعمال کی تصاویر چھ تصاویر ہونا چاہئے جو آپ کی مکھی کے اندر جلد ایک ہموار تصویر بنانے کے لئے، کیوب نقشے کہا جاتا ہے.
  
  
 Var Envmap = نیا تین. cubetextureloader ()
.etpath (اثاثوں / ')
. لوڈ (['px.jpg'، 'nx.jpg'، 'py.jpg'، 'NY.
JPG '،' pz.jpg '،' nz.jpg '])؛ 
  

   11. Tetrahedon شامل کریں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   تین.js بہت سے پہلے سے طے شدہ جیومیٹس کے ساتھ آتا ہے جو آپ اپنے مناظر کے لئے استعمال کرسکتے ہیں. ٹھنڈا لوگوں میں سے ایک Tetrahedron ہے. اعتراض کے چہرے کی تعداد کی وضاحت کرنے کے لئے یہ ایک ردعمل اور ایک 'تفصیل' پیرامیٹر لیتا ہے.
  
  

   مندرجہ ذیل کوڈ کے ساتھ اپنے منظر میں ایک شامل کریں.
  
  
 // tetrahedron بنائیں
وار جیومیٹری = نیا تین.
Tetrahedronbuffegeagemetry (2،0)؛
Var مواد = نیا تین .meshySicalmicalmential.
({نقشہ: بناوٹ، ENVMAP: ENVMAP،
دھاتی: 1.0، موٹائی: 0.0})؛
T = نیا تین. میش (جیومیٹری، مواد)؛
t.rotation.x = math.pi / 180 * -10؛
scene.add (t)؛

  

   12. گردش اور کیمرے کا ہدف شامل کریں
  
  

  
  

   اس بات کا یقین کرنے کے لئے کہ کیمرے ہمیشہ آپ کی اہم چیز کو دیکھ رہا ہے، آپ کیمرے کا استعمال کرتے ہیں. آپ اپنے اعتراض میں کچھ وسیع گردش بھی شامل کرسکتے ہیں.
  
  

   اس طرح دیکھنے کے لئے اپنے متحرک فنکشن کوڈ کو اپ ڈیٹ کریں.
  
  
 درخواست ناممکن فریم (متحرک)؛
t.rotation.y - = 0.005؛
کیمرے .logat (t.position)؛
Renderer.render (منظر، کیمرے)؛ 
  

   13. ذرات لوپ شامل کریں
  
  

   اگلا، منظر میں کچھ وسیع ذرات شامل کریں. یہ پیش منظرلائیو ویڈیو لوپ کے ساتھ اچھی طرح سے مرکب کریں گے، آپ بعد میں شامل کریں گے، ساتھ ساتھ انٹرایکٹو. کوڈ کو پکڑنے کے لئے ایک سادہ 'کے لئے لوپ شامل کریں جسے آپ ایک سے زیادہ ذرات بنانے کے لئے استعمال کریں گے.
  
  
 کے لئے (i = 0؛ i & lt؛ = num؛ i ++) {
// ذرہ کوڈ یہاں جائیں گے
} 
  

   14. ذرہ میش بنائیں
  
  

   ایسا کرنے کی پہلی چیز ذرہ اعتراض بناتی ہے. آپ اس شعبوں، sphites، یا کسی بھی چیز کے ساتھ کر سکتے ہیں جو آپ چاہتے ہیں. اب کے لئے، انہیں سادہ شعبوں کی کوشش کریں.
  
  

   آپ کے لوپ کے اندر اندر مندرجہ ذیل کوڈ شامل کریں.
  
  
 // نئی میش بنائیں
var جیومیٹری = نئے تین.SpherebuffeGeMetry (.1،6،6)؛
var مواد = نیا تین
وار ذرہ = نیا تین. میش (جیومیٹری، مواد)؛

  

   15. بے ترتیب پوزیشن اور فاصلے مقرر کریں
  
  

   ذرات مرکزی اعتراض کو مدار کریں گے اور بے ترتیب طور پر پوزیشن میں رہیں تاکہ وہ اچھی طرح سے جگہ کو بھریں اور ایک نامیاتی نظر رکھو. غیر قانونی پوزیشن قائم کرنے کے لئے مندرجہ ذیل کوڈ شامل کریں اور پھر ہر ذرہ کے لئے مسلسل فاصلے کو تفویض کریں.
  
  
 // مقرر بے ترتیب پوزیشن
particle.position.set (ریاضی. رینڈوم () * 100.0 -
50.0،0.0، ریاضی. رینڈوم () * - 10.0)؛
// calc متصل مسلسل اور تفویض کے طور پر
اعتراض کرنا
Var A = نیا تین. ویکٹر 3 (0، 0، 0)؛
var b = particle.position؛
var d = a.distanceto (ب)؛
partactle.distance = d؛

  

   16. Orbits کے لئے زاویہ قائم کریں
  
  

   آرکائٹس کو تیز کرنے کے لئے تیزی سے متحرک کرنے کے لئے، زاویہ کے قولوں کو مدعو کرنے کے لئے شامل کریں، اور انہیں ذرہ کی جائیداد کے طور پر ذخیرہ کریں. ان بے ترتیب مواد کے زاویہ کی وضاحت کرنے کے لئے مندرجہ ذیل کوڈ شامل کریں.
  
  
 // 2 بے ترتیب لیکن مسلسل زاویہ کی وضاحت کریں
radians میں
particle.radians = ریاضی. رینڈوم () * 360 * ریاضی.
پی / 180؛ // ابتدائی زاویہ
particle.radians2 = ریاضی. رینڈوم () * 360 * ریاضی.
پی / 180؛ // ابتدائی زاویہ

  

   17. منظر اور مجموعہ میں ذرہ شامل کریں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   آخر میں، ذرہ کو منظر میں شامل کریں اور اشیاء کی صف میں آپ نے پہلے بیان کیا. یہ بعد میں آسان تمام ذرات کو خوش کر دے گا.
  
  
 // منظر میں اعتراض شامل کریں
scene.add (ذرہ)؛
// مجموعہ میں شامل کریں
آبجیکٹ. push (ذرہ)؛

  

   18. ذرات میں حرکت پذیری شامل کریں
  
  

   اگلا، آپ کو آپ کے ذرہ اشیاء کی پوزیشن اور گردش کو اپ ڈیٹ کرنے کی ضرورت ہے. یہ مدار منظر مرکز سے مسلسل فاصلے پر. اپنے متحرک تقریب میں مندرجہ ذیل کوڈ شامل کریں.
  
  
 کے لئے (i = 0؛ i & lt؛ = num؛ i ++) {
var o = اشیاء [i]؛
o.rotation.y + =. 01؛
اگر (میں٪ 2 == 0) {
o.radians + =. 005؛ o.radians2 + =. 005؛
} اور
o.radians - =. 005؛ o.radians2 - =. 005؛
}
o.position.x = (ریاضی. cos (o.radians) *
o.distance)؛
o.position.z = (ریاضی .sin (o.radians) *
o.distance)؛
o.position.y = (ریاضی. (o.radians2) *
o.distance * .5)؛
}

  

   19. ایک عنوان شامل کریں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   اگلا، اسکرین کے مرکز میں ایک عنوان شامل کریں - آپ کے برانڈ متعارف کرانے کا ایک نام. عنوانات کے لئے خط وقفہ کاری ایک عظیم سنیما نظر دیتا ہے. کسی بھی فونٹ / سٹائل کا استعمال کریں جو آپ پسند کرتے ہیں، لیکن فلم کے عنوان کو حوصلہ افزائی کے لئے نظر آتے ہیں. ہماری فہرست دیکھیں
   
    مفت فونٹ
   
   ہمارے پسندیدہ ڈاؤن لوڈ، اتارنا فونٹ کی ایک فہرست کے لئے.
  
  

   سب سے پہلے آپ کے عنوان کے لئے ڈوم عنصر شامل کریں. بند ہونے والے جسم کی ٹیگ سے پہلے اسکرپٹ ٹیگ کے بعد اس کو شامل کریں.
  
  
 & lt؛ H1 اور GT؛ رشتہ دار سٹوڈیو اور ایل ٹی؛ / H1 اور GT؛

  

   اپنی فائل کے سب سے اوپر پر اپنے سٹائل ٹیگ پر اپنے عنوان کے لئے مندرجہ ذیل شیلیوں کو شامل کریں.
  
  
H1 {رنگ: سفید؛ پوزیشن: مطلق؛ اوپر: 50٪؛
Z-index: 100؛ چوڑائی: 100٪؛ متن سیدھا: مرکز؛
ٹرانسمیشن: ترجمہ (0، -100٪)؛ فونٹ - خاندان:
'Ralway'، سینسر سیرف؛ فونٹ وزن: 100؛
خط وقفے: 40px؛ متن ٹرانسمیشن:
بڑے پیمانے پر فونٹ سائز: 16px؛ }

  

   20. ایک ویڈیو لوپ شامل کریں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   آپ کی لینڈنگ کو گہرائی پیدا کرنے کے لئے ایک اچھا چال ایک چھوٹا سا ویڈیو لوپ شامل کرنا ہے. آپ دھواں، دھول یا ذرات استعمال کرسکتے ہیں. یہ بڑے پیمانے پر دستیاب آن لائن، یا وسیع تعداد میں ویڈیو اور فلم سازی پیکجوں کا حصہ ہیں. اپنے H1 ٹیگ کے بعد مندرجہ ذیل ویڈیو ٹیگ شامل کریں. نوٹ کریں کہ آپ اسے 'خاموش' اور آٹوپلے میں قائم کرنا چاہتے ہیں. اس ویڈیو کو بھی موبائل آلات پر بھی آن لائن کھیلنے کی اجازت دیتا ہے.
  
  
 ​​& lt؛ ویڈیو ID = "VideoBacker" لوپ SRC = "اثاثوں /
snow.mp4 "Autoplay خاموش اور GT؛ & lt؛ / ویڈیو اور GT؛

  

   ویڈیو کو سٹائل کرنے کے لئے، مندرجہ ذیل سی ایس ایس آپ کے صفحے کے سر پر اپنے شیلیوں میں شامل کریں.
  
  
 ​​#videobacker {پس منظر سائز: کور؛
آبجیکٹ فٹ: کور؛ Z-index: 9؛ دھندلاپن: .3؛
پوزیشن: مطلق؛ اوپر: 0px؛ بائیں: 0px؛
چوڑائی: 100VW؛ اونچائی: 100vh؛ منتقلی: 1S.
دھندلاپن آسانی سے باہر؛

  

   21. خط باکسنگ شامل کریں
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   واقعی آپ کے لینڈنگ کے صفحے کو سنیما سٹائل دینے کے لئے، صفحے میں کچھ خط باکس شامل کریں.
  
  

   اس کے لئے ڈوی عناصر کو شامل کرکے شروع کریں.
  
  
 ​​& lt؛ ڈوی کلاس = 'بار ٹاپ' اور جی ٹی؛ & lt؛ / div & gt؛
& lt؛ ڈوی کلاس = 'بار نیچے' اور جی ٹی؛ & lt؛ / div & gt؛

  

   پھر ان دو سیاہ سلاخوں کے لئے شیلیوں کو شامل کرنے کے لئے اپنی شیلیوں کو اپ ڈیٹ کریں. آپ ان شیلیوں کو اپنے ذائقہ اور ضروریات کے ساتھ ساتھ ایڈجسٹ کر سکتے ہیں.
  
  
. بار اوپر {پس منظر کا رنگ: سیاہ؛
اونچائی: 100px؛ پوزیشن: مطلق؛ اوپر: 0؛
بائیں: 0؛ Z-index: 100؛ چوڑائی: 100VW؛}
.میں نیچے {پس منظر کا رنگ: سیاہ؛
اونچائی: 100px؛ پوزیشن: مطلق؛ نیچے: 0؛
بائیں: 0؛ Z-index: 100؛ چوڑائی: 100VW؛} 
  

   
    یہ مضمون اصل میں ویب ڈیزائنر کے 287 میں شائع ہوا.
   
   
    
     مسئلہ 287 خریدیں
    
   
   
    یا
   
   
    
     یہاں سبسکرائب کریں
    
   
   
    .
   
  
  

   
    مزید پڑھ:
   
  
  

   

    
     ویب اجزاء: حتمی گائیڈ
    
   
   

    
     ایک پرتوں parallax اثر کیسے بنائیں
    
   
   

    
     سی ایس ایس کے ذریعے SVG پر حرکت پذیری کو کیسے شامل کریں