Adobe Muse استعمال ڪندي Parallax Scrolling ڪيئن ٺاهيو

اڄ ئي ويب تي "گرمي" طريقيڪار مان هڪ آهي Parallax scrolling آهي. اسان سڀئي انهن سائيٽن تي آهن جتي توهان پنهنجي ماؤس تي اسڪالر وارين کي ڦيرايو ٿا ۽ صفحي تي مواد کليل ۽ مٿي يا صفحي تي هلڻ وانگر توهان کي ماؤس سائيڪل کي ڦيرايو ٿا.

ويب جي ويب سائٽ ۽ گرافڪ ڊزائن ۾ انھن لاء، ھن ٽيڪنڪجي سي ايس ڊي گهري جي رقم جي سبب حاصل ڪرڻ ڏاڍو ڏکيو ٿي سگھي ٿو.

جيڪڏهن توهان انهي جي وضاحت ڪئي، ڪجهه اهڙا ايپليڪيشنون آهن جيڪي شايد گرافڪ فنڪار کي اپيل ڪري سگهن ٿيون. اهي بنيادي طور ويب پيجن تي هڪ واقف پيج ترتيب واري طريقي سان استعمال ڪن ٿيون، جنهن جو مطلب آهي ته ڪا به ڪافي نه آهي، ڪا به ڪوڊ شامل آهي. واقعي هڪ ايپليڪيشن جيڪا حقيقت کي پسماندگي طور تي پڪو پوندي آهي Adobe Muse.

گرافڪس پاران ڪم ڪيل ڪم فن کي استعمال ڪندي فنڪار کي ڪافي حيرت انگيز آهي ۽ توهان ڏسي رهيا آهيو ته توهان هن ڪم جي ڏينهن جو فنڪشنل سائٽ جي زيارت ڪندي ڪري سگهو ٿا. جيتوڻيڪ ويب پروفيسر کي رزق ڪرڻ جو طريقو آهي، جيئن "واٽي اپ اپ" جو ڪجهه قسم وڃي رهيو آهي، اهو پڻ ڊزائنر طرفان استعمال ڪيو ويو آهي موبائل ۽ ويب پروٽوٽسائپ ٺاهي ٿي، آخرڪار انهن جي ٽيم تي ڊولپرز کي پهچايو ويندو.

هڪ ٽيڪنڪ جيڪا فنڪار سان انجام ڏيڻ لاء ممڪن حد تائين آسان آهي ۽ جيڪڏهن توهان مشق جي مڪمل ورزن کي ڏسڻ چاهيو ٿا، اسان کي پنڌ ​​ڪندي، پنهنجي برائوزر هن صفحي کي اشارو ڪندي. جڏهن توهان پنهنجو مائوس جي اسڪالر واري سائيڪل کي رول بڻائي، لکت لڳي ته صفحي کي مٿي يا هيٺ ڦهليندي ڏسڻ ۾ اچي ٿو.

اچو ته شروع ڪريون.

01 جو 07

ويب پيج ٺاهي

جڏهن توهان فنڪشنل لانچ کي نئين سائيٽ جي لنڪ تي ڪلڪ ڪريو. اهو نئون سائيٽ پراپرڪٽس کلي ويندو. اهو پروجيڪٽ ڊيسڪ ايڊليڪيشن جي لاء ڊزائين ڪيو ويندو ۽ توهان ان کي شروعاتي ليٽ پاپ-مين مينيو ۾ چونڊ ڪري سگهو ٿا. توهان ڪاما جي تعداد، گٽر چوٿون، مارگائن، ۽ Padding جي تعداد لاء پڻ سيٽ ڪري سگهو ٿا. انهي معاملي ۾، اسان سان گڏ هن سان تعلق رکندڙ نه هئا ۽ صرف هوٽل تي ڪلڪ ڪيو.

02 جو 07

صفحي کي جوڙ ڪريو

جڏهن توهان سائيٽ جي خاصيتن کي سيٽ ڪريو ۽ ٺيڪ ڪريو ڪلڪ ڪيو توهان کي ورتو ويو آهي ڇا پلان ڏسڻ کي. هتي هڪ گهر جو صفحو مٿو مٿاهون ۽ ماهر جي دريء تي هڪ ماسٽر پيج آهي . اسان کي رڳو ھڪڙي صفحي جي ضرورت آھي. ڊيزائن ڏسڻ لاء حاصل ڪرڻ لاء، اسان گهر جي صفحي تي ڊبل ڪلڪ ڪيو جنهن کي انٽررفيف کلي ڪيو.

کاٻي پاسي تي ڪجھ بنيادي اوزار آهن ۽ حق تي مختلف قسم جا پينل جيڪي صفحي تي مواد کي ميراپ ڪرڻ لاء استعمال ڪندا آهن. مٿي جا وڏا حصا آهن، جيڪي صفحي تي لاڳو ٿي سگهن ٿا، يا صفحي تي چونڊيل ڪابه شيء. انهي حالت ۾، اسان کي ڪارو پس منظر ڪرڻو پوندو. هن کي مڪمل ڪرڻ لاء، اسين برائوزر ڀريل رنگ تي ڪلڪ ڪريو ۽ رنگين چنار کان ڪارو چونڊيو.

03 جو 07

صفحي ۾ ٽيڪسٽ شامل ڪريو

اڳيون قدم ھن صفحي ۾ ڪجھ متن شامل ڪرڻ آھي. اسان هن ٽيڪسٽ جو اوزار چونڊيو ۽ ٽيڪسٽ باڪس ڪڍي ڇڏيو. اسان لفظ "خوشحالي" داخل ڪيو ۽، خاصيتن ۾ متن کي ايريڊ تي، 120 پکسلز وائٹ. مرڪز بڻايو.

اسان وري چونڊيل ٽوليون ڏانهن تبديل ڪيو، Textbox تي ڪلڪ ڪيو ۽ مٿين کان اس جي پوزيشن کي 168 پکسلز مقرر ڪريو. درسي باڪس سان اڃا تائين چونڊيو ويو، اسان پينل کي ڇڪي ڇڏيو ۽ متن جي خاني کي مرڪز ڏانهن منتقل ڪيو.

آخرڪار، ٽيڪسٽ بڪ چونڊيل سان، اسان اختيارن / Alt ۽ شفٽ چيڪن کي گهٽايو ۽ متن بڪ جا چار نقل ڪيا. اسان متن کي تبديل ڪيو ۽ هر ڪاپي واري اي پوزيشن کي:

توهان کي نوٽيس ڪندا، جيئن توهان هر ٽيڪسٽ بڪ جو مقام مقرر ڪيو آهي، اهو صفحو متن جي مقام کي ترتيب ڏيڻ جي لاء ٺهيل آهي.

04 جو 07

تصوير جو جڳھ شامل ڪريو

ايندڙ قدم متن جي بلاڪ جي وچ ۾ تصويرون رکندي آهي.

پهرين قدم لاء ريڪنگل ڊوائيس چونڊيو ۽ اسان جو ڪو دٻو جيڪو هن صفحي جي هڪ پاسي کان ٻئي ڏانهن وڌايو آهي. مستطيل منتخب ٿيل سان، اسان ان جي اوچائي 250 250 پکسلز مقرر ڪيو ۽ ان جي پوزيشن 425 پکسلز تائين . اهو منصوبو هوندو آهي ته انهن کي هميشه جي وڌاء يا صفحي جي برائوزر جي پاسپورٽ کي هٽائڻ لاء پيج جي چوٽي تي معاهدو آهي. هن کي مڪمل ڪرڻ لاء، اسان پراپرٽ ۾ 100٪ چوٿون بٽڻ تي ڪلڪ ڪيو. اهو ڇا ڪري ٿو X قيمت ڪڍي ٿو ۽ يقيني بڻائڻ جو هميشه هميشه هڪ برائوزر ۾ ڏسڻ وارو چوٿين 100 سيڪڙو آهي.

05 جي 07

تصوير جي جڳھ وارن ڏانھن تصويرون شامل ڪريو

منتخب ڪيل آرٽيڪل سان اسين ڊيل لنڪ، رنگين چپ نه ڪيو ۽ ڪلڪ ڪيو ته ايم پي مسڪ تي ڪلڪ ڪيو ۽ مستطيل ۾ هڪ تصوير شامل ڪرڻ لاء. فٽا واري ايريا ۾، اسان فٽ کي اسڪيل چونڊيو ۽ پوزيشن ايريا ۾ سينٽرل کي ڪلڪ ڪيو ته تصوير جي مرڪز مان تصوير کي يقيني بڻائي سگهجي ٿي.

اڳيون، اسان پهريان ٻه متن بلاڪ جي تصوير جي ڪاپي ٺاهي لاء اختيارن / Alt-Shift-drag ٽيڪنڪ استعمال ڪيو، مڪمل پينل کوليو ۽ تصوير کي ٻئي لاء تبديل ڪري ڇڏيو. اسان هن باقي باقي تصويرون پڻ ڏنيون.

تصويرن سان گڏ جڳهه تي، اهو تحرڪ شامل ڪرڻ جو وقت آهي.

06 جي 07

Parallax Scrolling شامل ڪريو

Adobe Muse ۾ Parallax طومار شامل ڪرڻ جا ڪيترائي طريقا آهن. اسان توهان کي اهو آسان طريقو ڏيکارڻ جي ڪوشش ڪندا آهيون.

مڪمل پينل سان گڏ، اسڪول ٽيب تي ڪلڪ ڪريو ۽، جڏهن اهو کليل آهي، موشن چيڪ بڪس تي ڪلڪ ڪريو.

توهان ابتدائي ۽ فائنل موشن لاء قدر ڏسو. انهن جو اندازو لڳايو ته تصوير ڪيتري تيز رفتار واري اسڪيل جي سلسلي ۾ هلائي ٿو. مثال طور، هڪ قيمت 1.5 پيڙهه کان تيز رفتار واري تصوير 1.5 ڀيرا هلائي ويندي. اسان تصويرن کي ڦوٽو ڪرڻ لاء 0 جي قيمت ڪئي.

افقي ۽ عمودي تيرون رفتار جي هدايت جو اندازو لڳائي ٿو. جيڪڏهن اهي قيمتون آهن ته اهي تصويرون جيڪي توهان کي ڪلڪ ڪندا آهن انهن جي قيمت نه هوندي.

وچولي قيمت- اهم پوزيشن - نقشو نقشو ڏيکاريندي آهي جتي تصويرن کي منتقل ڪرڻ شروع ٿئي ٿي. مٿي ڏنل تصوير واري تصوير شروع ٿئي ٿي، هن تصوير لاء، صفحي جي مٿين کان 325 پکسلز. جڏهن اسڪرپٽ پهچي ٿي ته اها تصوير کي منتقل ڪرڻ شروع ٿئي ٿي. توھان ھن قدر کي تبديل ڪري سگھوٿا يا پھر ان کي تبديل ڪرڻ واري دٻي ۾، دٻي واري دٻي ۾ ڪلڪ ڪيو يا پوائنٽ کي ڇڪڻ ۽ مٿي ڪلڪ ڪريو.

ھن صفحي کي ٻين تصويرن جي لاء ورجائي ٿو.

07 جو 07

برائوزر ٽيسٽ

هن وقت، اسان ختم ٿي ويا. پهرين شيء اسان ڪيو، واضح سببن لاء، فائيل> محفوظ ڪيل سائيٽ چونڊيو هو. برائوزر جي آزمائش لاء، اسان صرف چونڊيو > ڪروڙ صفحو برائوزر ۾ چونڊيو. اهو اسان جي ڪمپيوٽر جو ڊفالڪ برائوزر کوليو ۽، جڏهن صفحي کوليو ويو، اسان اسڪولنگ شروع ڪيو.