ایک انٹرایکٹو Parallax تصویر بنائیں

Sep 12, 2025
کيسے

Parallax طومار اب کوئی ضمانت کی توجہ نہیں ہے، اس کا استعمال کیا جاتا ہے، لیکن آپ کے زائرین کو مشغول کرنے اور آپ کو بڑھانے کے لئے پارلایکس کی تکنیکوں کا استعمال کرنے کے دوسرے طریقے ہیں صارف کا تجربہ .

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

  • سپر تیز رفتار سی ایس ایس کے لئے 5 تجاویز

یہ ایک شاندار اثر ہے جو لاگو کرنے کے لئے بہت مشکل نہیں ہے؛ بس آپ کی ویب سائٹ کو گہرائی کی آنکھیں پکڑنے کے احساس کو دینے کے لئے ان اقدامات پر عمل کریں.

کامل کے ساتھ اپنی اپنی آنکھیں پکڑنے والی سائٹ بنائیں ویب میزبانی سروس اور ویب سائٹ بلڈر آلے اور، راستے کے ساتھ، آپ کے ڈیزائن فائلوں کو بہترین میں محفوظ کریں کلاؤڈ اسٹوریج .

01. HTML شروع کریں

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

 اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ عنوان اور GT؛ ماؤس سکرال اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ لنک REL = "Stylesheet" کی قسم = "ٹیکسٹ / سی ایس ایس" href = "styles.css" / & gt؛
& lt؛ سکرپٹ SRC = "Code.js" & gt؛ & lt؛ / script & gt؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
*** مرحلہ 2
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

02. مواد عناصر

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

 اور ایل ٹی؛ آرٹیکل ڈیٹا-پارلایکس اور جی ٹی؛
  & lt؛ div & gt؛ & lt؛ / div & gt؛
  & lt؛ div & gt؛ & lt؛ / div & gt؛
  & lt؛ div & gt؛ & lt؛ / div & gt؛
& lt؛ / آرٹیکل اور جی ٹی؛

03. Parallax کنٹینر سٹائل

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

 [ڈیٹا-پارلایکس] {
  پوزیشن: رشتہ دار؛
  چوڑائی: 100VW؛
  اونچائی: 100vh؛
}

04. Parallax بچوں

اعداد و شمار کے پارلایکس کنٹینر کے اندر اندر پہلی سطح کے عناصر میں سے ہر ایک سائز اور مرکزی طور پر ظاہر کرنے کے لئے پوزیشن میں ہیں. والدین سے تعلق رکھنے والی پوزیشننگ کے ساتھ، فی صد پیمائش یونٹ کے طور پر استعمال کیا جاتا ہے، جس میں سائز سازی اور پوزیشننگ پارلایکس کنٹینر کے سلسلے میں رکھا جائے. اس مثال کے لئے، ایک شفاف سرخ پس منظر اس اثر کا مظاہرہ کرنے کے لئے استعمال کیا جاتا ہے - آپ Background کا استعمال کرتے ہوئے PNG یا SVG تصویر کے ساتھ تبدیل کر سکتے ہیں: URL ("آپ کی تصویر یہاں"). 

 [ڈیٹا-پارلایکس] اور جی ٹی؛ * {
  پوزیشن: مطلق؛
  چوڑائی: 50٪؛
  اونچائی: 50٪؛
  بائیں: 25٪؛
  اوپر: 25٪؛
  سرحد: 1px ٹھوس # 000؛
  پس منظر: RGBA (255،0،0، .25)
}

05. جاوا اسکرپٹ شروع کریں

'code.js' کہا جاتا ہے ایک نئی فائل بنائیں. جاوا اسکرپٹ صارف کے ماؤس کی بات چیت میں ردعمل کو کنٹرول کرنے کے لئے استعمال کیا جائے گا. ہم جاوا اسکرپٹ کو جاوا اسکرپٹ کوڈ میں سے کسی کو چلانے کے لئے نہیں چاہتے ہیں جب تک کہ صفحے کو مکمل طور پر لوڈ نہیں کیا جاسکتا ہے، لہذا کوڈ 06 اور 07 کے لئے کوڈ لوڈ ایونٹ کی طرف سے تیار ایک فنکشن رکھتا ہے، جس میں ونڈو کو لوڈ کرنا جب فعال ہوجاتا ہے. 

 ونڈو. Addeventlistener ("لوڈ"، فنکشن () {
  *** مرحلہ 6 یہاں
})؛

06. نوڈ تلاش

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

 آر نوڈس = دستاویز. queryselectorall ("ڈیٹا-پارلایکس]")؛
کے لئے (var i = 0؛ i & lt؛ nodes.lugh؛ i ++) {
  وار بچوں = نوڈس [i]. بچوں؛
  کے لئے (var n = 0؛ n & lt؛ بچوں. طاقت؛ n ++) {
  بچوں [ن]. ایسیٹیٹٹریٹ ("ڈیٹا انڈیکس"، N + 2)؛
  }
  *** مرحلہ 7
}

07. Parallax سننے والے

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

 نوڈس [i]. Addeventlistener ("mousemove"، فنکشن (ای) {
  var elms = it.children؛
  کے لئے (var c = 0؛ c & lt؛ elms.length؛ c ++) {
  Var Divisor = ParseInt (ELMS [C] .gettertribute ("ڈیٹا انڈیکس")؛
  var startx = it.offetwidth / 4؛
  Var شروع = it.offeetheight / 8؛
  elms [c] .style.left = startx - ((E.Screenx / Divisor) -e.cleientx) / 3) + "PX"؛
  elms [c] .style.top = ابتدائی - (((E.Screeny / Divisor) -e.clienty) / 3) + "PX"؛
  }
})؛

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 272 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 272 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

  • جاوا اسکرپٹ کے ساتھ متحرک SVG
  • WebGl کے ساتھ مائع اثرات بنائیں
  • کراس براؤزر مطابقت کے مسائل سے بچنے کے لئے 10 طریقے

کيسے - انتہائی مشہور مضامین

Nextjs / رد عمل کے لئے SEO دوستانہ سر اجزاء کی تعمیر

کيسے Sep 12, 2025

(تصویری کریڈٹ: Pexels پر منفی جگہ) جب ردعمل ایک طاقتور جاوا اسکرپٹ لا..

غیر حقیقی انجن میں ایک 3D ویلیوفولف کیسے بنائیں

کيسے Sep 12, 2025

ایک ویلیوففف کی اس زبردستی تصویر کے لئے تصور، ماڈل، ساخت اور مواد سیٹ اپ - جو کوچیچی کے لئے تخلیق کیا گیا ت�..

فوٹوشاپ میں مکسر برش ماسٹر

کيسے Sep 12, 2025

گزشتہ چند سالوں میں ڈیجیٹل پینٹنگ کے اوزار سنجیدگی سے اعلی درجے کی ہیں. ..

3D آرٹ میں 2D عکاسی کو تبدیل کریں

کيسے Sep 12, 2025

میرا سفر کرنے میں میرا سفر 3D آرٹ کچھ سال پہلے شروع ہوا جب میرے ب�..

آپ کے آرٹ ورک کو کس طرح پہاڑنے کے لئے

کيسے Sep 12, 2025

ایک اچھی طرح سے پھانسی پہاڑ صرف ایک سے زیادہ ہے آرٹ ٹیکنالوجی ا�..

حقیقت پسندانہ 3D لائٹنگ کے لئے 12 تجاویز

کيسے Sep 12, 2025

روشنی میں بنیادی طور پر بنیادی ہے 3D آرٹ پراجیکٹ آپ پر کام کرتے ہ..

ایک حقیقت پسندانہ کھیلوں کی گاڑی کیسے بنانا

کيسے Sep 12, 2025

گزشتہ برسوں میں، میں اپنی صلاحیتوں کو روشنی اور انجام دینے کے ساتھ ساتھ..

P5.js کے ساتھ تخلیقی کوڈ تلاش کریں

کيسے Sep 12, 2025

ایک دن خرچ کرو برینڈن ڈیو پر لندن پیدا ..

اقسام