ایڈوب فنانس کا استعمال کرتے ہوئے Parallax Scrolling کیسے بنائیں

ویب پر "سب سے زیادہ" تکنیکوں میں سے ایک، پیرلایکس سکرالنگ ہے. ہم سب ان سائٹس پر موجود ہیں جہاں آپ اپنے ماؤس پر سکرال پہیا گھومتے ہیں اور صفحے پر موجود مواد اوپر یا نیچے یا اس صفحے پر چلتے ہیں جیسے آپ ماؤس پہیا کو گھومتے ہیں.

ویب ڈیزائن اور گرافک ڈیزائن میں ان لوگوں کے لئے، اس ٹیکنالوجی کی ضرورت ہے سی ایس ایس کی رقم کی وجہ سے حاصل کرنے کے لئے زیادہ سے زیادہ مشکل ہوسکتا ہے.

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

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

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

آو شروع کریں.

01 کے 07

ویب صفحہ بنائیں

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

02 کے 07

صفحہ تشکیل دیں

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

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

03 کے 07

صفحہ میں متن شامل کریں

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

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

آخر میں، منتخب متن باکس کے ساتھ، ہم آپشن / Alt اور Shift کی چابیاں رکھتے ہیں اور متن باکس کے چار کاپیاں بناتے ہیں. ہم نے ہر نقل کا متن اور Y کی حیثیت کو تبدیل کر دیا.

جیسا کہ آپ ہر متن باکس کے مقام کو مقرر کرتے ہیں، آپ کو نظر آئے گا، اس صفحے کا متن متن کے مقام کو ایڈجسٹ کرنا ہے.

04 کے 07

تصویری جگہ دار شامل کریں

اگلا قدم متن بلاکس کے درمیان تصاویر ڈالنا ہے.

پہلا مرحلہ آئتاکار کے آلے کو منتخب کرنا ہے اور ہمارے ایک باکس کو ڈراؤ جو صفحہ کے ایک حصے سے دوسرے تک ہوتا ہے. آئتاکار منتخب کردہ کے ساتھ، ہم نے اس کی اونچائی 250 پکسلز اور اس کی حیثیت سے 425 پکسلز تک مقرر کی . اس کا منصوبہ یہ ہے کہ وہ صارف کے براؤزر کے پاسپورٹ کو ایڈجسٹ کرنے کے لۓ ہمیشہ چوڑائی یا صفحہ کی چوڑائی پر معاہدہ کریں. اس کو پورا کرنے کے لئے، ہم نے پراپرٹیز میں 100٪ چوڑائی کے بٹن پر کلک کیا. یہ کیا کرتا ہے X قیمت کو بھوری ہوئی اور اس بات کا یقین کرنے کے لئے کہ براؤزر میں تصویر دیکھنے والی چوڑائی کا 100 فیصد ہمیشہ ہوتا ہے.

05 کے 07

تصویری جگہ داروں کو تصاویر شامل کریں

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

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

جگہوں پر تصاویر کے ساتھ، تحریک کا اضافہ کرنے کا وقت ہے.

06 کا 07

Parallax طومار کاری شامل کریں

ایڈوب فنانس میں پارلایکس طومار کرنے کے کئی طریقے موجود ہیں. ہم آپ کو یہ کرنے کا ایک آسان طریقہ دکھانے کے لئے جا رہے ہیں.

مکمل پینل کھولنے کے ساتھ، طومار ٹیب پر کلک کریں اور، جب کھولتا ہے، موشن چیک باکس پر کلک کریں.

آپ ابتدائی اور حتمی موشن کے لئے اقدار دیکھیں گے. اس کا تعین یہ ہے کہ تصویر طومار وہیل کے سلسلے میں کتنا تیز ہے. مثال کے طور پر، 1.5 کی ایک قیمت پہیے سے 1.5 مرتبہ تیزی سے تصویر کو منتقل کرے گی. ہم تصاویر کی جگہ کو بند کرنے کیلئے 0 کی ایک قدر استعمال کرتے ہیں.

افقی اور عمودی تیر تحریک کی سمت کا تعین کرتے ہیں. اگر اقدار 0 ہیں تو تصاویر قطع نظر آپ کے کلک کردہ تیر والے نشان کے بغیر بجٹ نہیں کرے گی.

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

اس صفحے پر دوسری تصاویر کے لئے دوبارہ دہرائیں.

07 کے 07

براؤزر ٹیسٹ

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