متحرک اسپلٹ اسکرین لینڈنگ پیج بنائیں

مواد

• 01. سیٹ اپ کریں
• 02. HTML ختم کریں
• 03. ساس متغیر کو دریافت کریں
• 04. باڈی اسٹائل ایڈجسٹ کریں
• 05. حصے کے عنوان کو اسٹائل کریں
• 06. CTAs کو کھڑے کریں
• 07. کنٹینر کا پس منظر اور اسکرینیں مرتب کریں
• 08. پس منظر کی تصاویر شامل کریں
• 09. ٹرانزیشن اور ہوور اثرات شامل کریں
• 10. جاوا اسکرپٹ میں منتقل کریں
• 11. ایک کلاس شامل کریں اور ختم کریں
• 12. اسے جوابدہ بنائیں

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

• اس ٹیوٹوریل کے لئے ورکنگ کوڈ پین کو دیکھیں

اس ٹیوٹوریل میں ، ہم ایک افسانوی فیشن برانڈ کے ل an ایک منسلک لینڈنگ پیج کی تعمیر کے طریقہ کار کو آگے بڑھائیں گے۔ اس کا مرکز اسپلٹ اسکرین ڈیزائن کے ارد گرد ہوگا جس میں بڑی تصاویر اور متحرک منتقلی ہوں گی جو ہوور پر ہوتی ہیں۔اس صفحے پر ایکشن بٹنوں کے لئے دو واضح کال ہوگی اور ہم HTML ، ساس اسٹائل کے لئے اور ES6 نحو کا استعمال کرنے والے ونیلا جاوا اسکرپٹ کا ایک ٹچ استعمال کریں گے (یہ یقینی بنائے کہ آپ کی ویب ہوسٹنگ آپ کی ویب سائٹ کی ضروریات کے مطابق ہے)۔ بہت پیچیدہ؟ کوڈ کی ضرورت کے بغیر ایک ویب سائٹ بنائیں ، ایک عام ویب سائٹ بنانے والے کو آزمائیں۔

01. سیٹ اپ کریں

اگر آپ کوڈ پین استعمال کررہے ہیں تو ، اس بات کو یقینی بنائیں کہ سی ایس ایس قلم کی ترتیبات میں ’ایس سی ایس ایس‘ پر سیٹ ہے۔ آپ یہ ترتیب ترتیبات کے ٹیب پر کلک کرکے ، ’سی ایس ایس‘ کو منتخب کرکے اور ڈراپ ڈاؤن اختیارات میں سی ایس ایس پریپرسیسر کو ایس سی ایس ایس میں تبدیل کرسکتے ہیں۔

پھر ہم اپنے HTML میں شامل کرنا شروع کرسکتے ہیں۔ ہم ایک کنٹینر کلاس میں ’بائیں‘ کہلائے جانے والے ایک حصے اور ’دائیں‘ کے نام سے ایک حص wہ لپیٹ رہے ہیں ، جس میں دونوں حصوں کو ’سکرین‘ کی کلاس دی گئی ہے۔

Div> سیکشن </ سيڪشن> سیکشن> / سیکشن </ div>

02. HTML ختم کریں

اپنے ایچ ٹی ایم ایل کو حتمی شکل دینے کے ل we ، ہم ہر سیکشن کے لئے ایک عنوان کا استعمال کرتے ہوئے ایک کو شامل کریں گے h1 ٹیگ اس کے نیچے ہمیں ایک بٹن میں شامل کرنے کی ضرورت ہوگی ، جو کسی اور صفحے سے لنک ہوجائے گی اگر یہ کوئی حقیقی دنیا کا منصوبہ ہے۔ ہم اس کی ایک کلاس دیں گے بٹن چیزوں کو اچھی اور آسان رکھنے کے ل keep

div> سیکشن> h1> مینز فیشن </ h1> بٹن> a href = "#"> مزید جانیں </ a> / بٹن </ سيڪشن> سیکشن> h1> ویمن فیشن </ h1> بٹن> a href = "#"> جانیں مزید </ a> / بٹن> / سیکشن>

03. ساس متغیر کو دریافت کریں

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

/ * * متغیرات * * / $ کنٹینر-بی جی کلور: # 444؛ $ بائیں-بی جی رنگ: آرجیبہ (136 ، 226 ، 247 ، 0.7)؛ $ بائیں بٹن-ہوور: rgba (94 ، 226 ، 247 ، 0.7)؛ $ دائیں- bgolor: rgba (227 ، 140 ، 219 ، 0.8)؛ $ دائیں بٹن-ہوور: rgba (255 ، 140 ، 219 ، 0.7)؛ over ہوور چوڑائی: 75٪؛ $ چھوٹی چوڑائی: 25٪؛ imate متحرک اسپیڈ: 1000 ملی میٹر؛

04. باڈی اسٹائل ایڈجسٹ کریں

سب سے پہلے ، ہم جسم میں تمام ڈیفالٹ بھرتی اور مارجن صاف کریں گے اور پھر فونٹ فیملی کو اوپن سینز پر سیٹ کریں گے۔ اس سے صرف بٹن پر اثر پڑے گا ، لہذا اس سے زیادہ فرق نہیں پڑتا ہے کہ ہم کون سا فونٹ استعمال کرتے ہیں۔ پھر ہم چوڑائی اور اونچائی کو مقرر کریں گے 100% اور اس بات کو یقینی بنائیں کہ X محور پر بہنے والی کوئی بھی چیز پوشیدہ ہوجائے۔

HTML ، جسم، بھرتی: 0؛ مارجن: 0؛ فونٹ فیملی: ’اوپن سینز‘ ، سنس سیرف؛ چوڑائی: 100٪؛ اونچائی: 100؛؛ اتپرواہ x: چھپا ہوا؛ }

05. حصے کے عنوان کو اسٹائل کریں

اس دفعہ کے عنوانات کیلئے گوگل فونٹ منتخب کرنے کا وقت آگیا ہے - ہم نے پلے فیر ڈسپلے کا انتخاب کیا ہے۔ پھر استعمال کرتے ہوئے ٹرانسلیٹ ایکس ہم یقینی بناسکتے ہیں کہ سیکشن کے عنوانات ہمیشہ ایکس محور پر مرکوز ہیں۔

h1 {فونٹ سائز: 5ریم؛ رنگ: # ایف ایف؛ پوزیشن: مطلق؛ بائیں: 50٪؛ سب سے اوپر: 20٪؛ ٹرانسفارم: ٹرانسلیٹ ایکس (-50٪)؛ سفید جگہ: nowrap؛ فونٹ فیملی: ’پلے فیر ڈسپلے‘ ، سیرف؛ }

06. CTAs کو کھڑے کریں

ہمارے بٹن عملی اقدامات کے ل calls ہماری کالوں کی طرح کام کریں گے ، لہذا ان کو بڑا ، جرات مندانہ اور مقام رکھنے کی ضرورت ہے جہاں ان پر کلک کرنا آسان ہے۔ دونوں بٹنوں میں سفید سرحد اور منتقلی کا ایک دلچسپ اثر ہوگا۔ دونوں بٹنوں کے لئے پہلے سے طے شدہ اسٹائل ایک جیسے ہوں گے ، تاہم ہم ہوور پر ان کے رنگ تبدیل کردیں گے۔

.بٹن {ڈسپلے: بلاک؛ پوزیشن: مطلق؛ بائیں: 50٪؛ سب سے اوپر: 50٪؛ اونچائی: 2.6rem؛ بھرتی چوٹی: 1.2 ملی میٹر؛ چوڑائی: 15 مریم؛ متن کی سیدھ: مرکز؛ رنگ: سفید بارڈر: 3px ٹھوس # ایف ایف؛ سرحد کا رداس: 4px؛ فونٹ وزن: 600؛ ٹیکسٹ ٹرانسفارم: بڑے متن کی سجاوٹ: کوئی نہیں؛ ٹرانسفارم: ٹرانسلیٹ ایکس (-50٪)؛ منتقلی: تمام .2s؛

مرکزی بٹنوں پر ایک عمدہ سادہ ہوور اثر پڑے گا اور ہم رنگ کے ل specified ہم نے بیان کردہ ساس متغیرات کا استعمال کریں گے ، جو صفحہ کے پس منظر سے ملتے جلتے رنگ کے ہوں گے۔

.سکرین.لیفٹ. بٹن: ہوور {پس منظر کا رنگ: $ بائیں-بٹن-ہوور؛ بارڈر رنگ: $ بائیں بٹن-ہوور؛ sc .سکرین.ائریٹ. بٹن: ہوور {پس منظر کا رنگ: $ دائیں بٹن-ہوور؛ بارڈر رنگ: $ دائیں بٹن-ہوور؛

07. کنٹینر کا پس منظر اور اسکرینیں مرتب کریں

کنٹینر کلاس ہمارے پیپر ریپر کی حیثیت سے کام کرے گی اور ہم اس کی حیثیت کو نسبتا to متعین کریں گے ، اس لئے کہ ہم اسکرینوں کو مطلق پوزیشننگ پر رکھنا چاہتے ہیں۔ ہم کنٹینر کو پہلے سے طے شدہ پس منظر کا رنگ دیں گے ، لیکن یقینا this یہ نظر نہیں آئے گا کیونکہ ہم دونوں سکرین کے پس منظر میں مختلف رنگ ترتیب دے رہے ہیں۔

.container {پوزیشن: رشتہ دار؛ چوڑائی: 100٪؛ اونچائی: 100؛؛ پس منظر: $ کنٹینر- BgColor؛ .سکرین {پوزیشن: مطلق؛ چوڑائی: 50٪؛ اونچائی: 100؛؛ چھپا ہوا رساو؛ }

08. پس منظر کی تصاویر شامل کریں

بائیں اور دائیں دونوں حصے ایک شبیہہ دکھائیں گے ، اور آپ کو انسپلاش ، پکسبے یا پکسلز جیسی ویب سائٹ سے رائلٹی فری اسٹاک کی تصاویر مل سکتی ہیں (جسے میں نے اس ٹیوٹوریل میں استعمال کیا ہے)۔ چیزوں کو آسان بنانے کے ل I ، میں نے ایک مفت امیج ہوسٹنگ اور شیئرنگ سروس استعمال کی ہے جسے امی جی بی بی کہتے ہیں جسے ہم اپنے سی ایس ایس میں مربوط کرسکتے ہیں۔

.screen.left {بائیں: 0؛ پس منظر: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) سنٹر سینٹر نو ریپیٹ؛ پس منظر سائز: کور؛ &: پہلے {پوزیشن: مطلق؛ مواد: ""؛ چوڑائی: 100٪؛ اونچائی: 100؛؛ پس منظر: $ بائیں - bg रंग؛ }

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

.screen.right {حق: 0؛ پس منظر: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) سنٹر سینٹر نو ریپیٹ؛ پس منظر سائز: کور؛ &: پہلے {پوزیشن: مطلق؛ مواد: ""؛ چوڑائی: 100٪؛ اونچائی: 100؛؛ پس منظر: $ دائیں- bgColor؛ }

09. ٹرانزیشن اور ہوور اثرات شامل کریں

ہمارے دونوں اسکرینوں پر ہمارے ہوور اثر کیلئے حرکت پذیری کی رفتار کو کسی ایسے منتقلی کے ذریعہ کنٹرول کیا جائے گا جس میں ہمارے متغیر کی قدر ہوتی ہے imate متحرک اسپیڈ، جو 1000 ملی میٹر (ایک سیکنڈ) ہے۔ تب ہم حرکت پذیری کو کچھ نرمی دے کر ختم کردیں گے ، جو آسانی اور آسانی سے ہے جو ہمیں ہموار حرکت پذیری دینے میں مددگار ہوگی۔

.سکرین.لیفٹ ، اسکرین.رایٹ ، اسکرین.رایٹ: پہلے ، اسکرین.لیفٹ: اس سے پہلے {ٹرانزیشن: $ متحرک اسپیڈ تمام آسانی سے باہر؛ }

اب ہم کیا ہونا چاہتے ہیں وہ یہ ہے کہ جب آپ بائیں اسکرین پر ہوور کریں گے تو اس سیکشن میں جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک کلاس شامل کی جائے گی (جسے ہم بعد میں لکھیں گے)۔ جب یہ کلاس شامل ہوجائے گی ، تب اس اسکرین میں جو بھی متغیر کی چوڑائی ہم نے بیان کی ہے اس میں پھیلایا جائے گا - جو 75٪ ہوگا ، اور پھر دائیں طرف چھوٹی چوڑائی کے متغیر (25٪) پر سیٹ کیا جائے گا۔

.ہور-بائیں. بائیں {چوڑائی: over ہوور چوڑائی؛ }. ہور-بائیں. دائیں {چوڑائی: $ چھوٹی چوڑائی؛ } .ہور-بائیں. دائیں: اس سے پہلے {z-index: 2؛ }

یہ بالکل بائیں جانب کی طرح کام کرتا ہے ، جہاں جاوا اسکرپٹ کا استعمال کرتے ہوئے ماؤس ہوور پر ایک نئی کلاس شامل کی جائے گی ، اور اسی کے مطابق دائیں اسکرین کو پھیلایا جائے گا۔ ہمیں اس بات کو بھی یقینی بنانا ہوگا زیڈ انڈیکس پر سیٹ ہے 2 تو CTA بٹن زیادہ نمایاں ہوجاتا ہے۔

.ہور-دائیں. سیدھے {چوڑائی: over ہوور چوڑائی؛ over. ہور-دائیں. بائیں {چوڑائی: $ چھوٹی چوڑائی؛ over .ہور-دائیں. بائیں: پہلے {زیڈ انڈیکس: 2؛ }

10. جاوا اسکرپٹ میں منتقل کریں

سی ایس ایس کلاسوں کو شامل کرنے اور اسے دور کرنے میں ہماری مدد کے لئے ہم ونیلا جاوا اسکرپٹ کا ایک ٹچ استعمال کریں گے اور ہم ای ایس 6 کی کچھ نئی خصوصیات بھی استعمال کریں گے۔ ہمیں سب سے پہلے کچھ مستقل متغیرات کا اعلان کرنا ہے۔

کیونکہ ہم استعمال کریں گے دستاویز ایک سے زیادہ بار ، ہم مستقل متغیر کو نامزد کریں گے ڈاکٹر اور دستاویزات کو اس میں ذخیرہ کریں تاکہ ہم لفظ ’دستاویزات‘ کو اچھا اور چھوٹا رکھیں۔

const doc = دستاویز؛

اب ہمیں مزید تین اسٹالسٹ سیٹ کرنے کی ضرورت ہے جو اسٹور کو محفوظ کرے گی ٹھیک ہے, .بائیں اور .قابض سلیکٹرز۔ ہم مستقل استعمال کر رہے ہیں اس کی وجہ یہ ہے کہ ہم جانتے ہیں کہ ہم ان کی قدر کو تبدیل نہیں کرنا چاہتے ، لہذا مستحکم استعمال کرنے سے سمجھ میں آتی ہے۔ ابھی ان سیٹ کے ساتھ ، ہم آگے بڑھ سکتے ہیں اور ان میں ماؤس کے کچھ واقعات شامل کرسکتے ہیں۔

const right = doc.querySelector (". دائیں")؛ const بائیں = دستاویزات۔ انتخاب کنندہ (". بائیں")؛ رعایت کنٹینر = doc.querySelector (". کنٹینر")؛

کا استعمال کرتے ہوئے بائیں ہم نے آخری مرحلے میں مستقل متغیر کا اعلان کیا ، اب ہم اس میں ایونٹ سننے والوں کو شامل کرسکتے ہیں۔ یہ واقعہ ہوگا ماؤسینٹر ایونٹ اور کال بیک فنکشن استعمال کرنے کے بجائے ہم ES6 کی ایک اور خصوصیت استعمال کریں گے یرو افعال ’(() =>).

// نے ہوور بائیں پر کنٹینر عنصر میں کلاس کا اضافہ کردیا۔ ایڈڈ ایونٹ لیسٹنر ("ماؤسینٹر" ، () => {कंटेनर.کلاس لسٹ.اڈڈ ("ہوور-بائیں")؛})؛

11. ایک کلاس شامل کریں اور ختم کریں

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

// ہور بائیں پر شامل کی گئی کلاس کو ہٹاتا ہے۔ ADdEventListener ("ماؤسلیون" ، () => {कंटेनर.classList.remove ("ہوور بائیں")؛})؛

اب تک ہم بائیں اسکرین پر سب کچھ کر چکے ہیں۔ اب ہم جاوا اسکرپٹ کو ختم کردیں گے اور دائیں حصے کے عناصر پر کلاسز شامل اور خارج کردیں گے۔ ایک بار پھر ہم نے ہر چیز کو خوبصورت اور صاف نظر رکھنے کے لئے یہاں پر تیر فنکشن ترکیب کا استعمال کیا ہے۔

right.addEventListener ("ماؤسینٹر"، () => {कंटेनर.classList.add ("ہوور-رائٹ")؛})؛ right.addEventListener ("ماؤس لیو"، () => {कंटेनर.classList.remove ("ہوور-دائیں")؛})؛

12. اسے جوابدہ بنائیں

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

@ میڈیا (زیادہ سے زیادہ چوڑائی: 800px) {h1 {فونٹ سائز: 2rem؛ b. بٹن {چوڑائی: 12 مریم؛ }

ہم نے یہ یقینی بنادیا ہے کہ جب ہمارے صفحے کی چوڑائی 800px ہوجائے گی تو فونٹ اور بٹن سائز میں کم ہوجائیں گے۔ لہذا ، چیزوں کو ختم کرنے کے ل we ہم اونچائی کو بھی نشانہ بنانا چاہتے ہیں اور اس بات کو یقینی بنانا چاہتے ہیں کہ جب صفحہ کی اونچائی 700px سے نیچے آجائے تو ہمارے بٹن صفحے کو نیچے منتقل کردیں۔

@ میڈیا (زیادہ سے زیادہ اونچائی: 700px) {. بٹن {سب سے اوپر: 70٪؛ }

اپنے صفحات کو بچانا چاہتے ہیں؟ انہیں پی ڈی ایف کے بطور برآمد کریں اور انہیں محفوظ بادل اسٹوریج میں محفوظ کریں۔

ویب ڈیزائن ایونٹ لندن بنائیں 19-21 ستمبر 2018 کو واپسی ، صنعت کے معروف مقررین کے ایک بھرے شیڈول کی پیش کش ، ورکشاپوں کا پورا دن اور نیٹ ورکنگ کے قیمتی مواقع۔ اپنا جنریٹ ٹکٹ ابھی حاصل کریں.

یہ مضمون اصل میں نیٹ میگزین میں شائع ہوا تھا شمارہ 305. اب سبسکرائب کریں.