ایک متحرک سپلٹ اسکرین لینڈنگ کے صفحے کی تعمیر

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

• اس سبق کے لئے کام کرنے والی کوڈڈ دیکھیں

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

01. سیٹ اپ

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

پھر ہم اپنے ایچ ٹی ایم ایل میں شامل کر سکتے ہیں. ہم 'بائیں' اور ایک کنٹینر کلاس کے اندر 'دائیں' نامی ایک سیکشن کو لپیٹ کرنے جا رہے ہیں، دونوں حصوں کے ساتھ 'اسکرین' کی کلاس دونوں حصوں کے ساتھ.

 & lt؛ div class = "کنٹینر" اور GT؛
  & lt؛ سیکشن کلاس = "اسکرین بائیں" اور جی ٹی؛
  & lt؛ / سیکشن اور GT؛
  & lt؛ سیکشن کلاس = "سکرین دائیں" اور جی ٹی؛
  & lt؛ / سیکشن اور GT؛
& lt؛ / div & gt؛ 

02. HTML ختم

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

 & lt؛ div class = "کنٹینر" اور GT؛
   & lt؛ سیکشن کلاس = "اسکرین بائیں" اور جی ٹی؛
    & lt؛ h1 & gt؛ مین فیشن & lt؛ / h1 & gt؛
      & lt؛ بٹن اور جی ٹی؛
       & lt؛ ایک href = "#" کلاس = "بٹن" اور جی ٹی؛ مزید جانیں اور ایل ٹی؛ / A & GT؛
      & lt؛ / بٹن اور جی ٹی؛
    & lt؛ / سیکشن اور GT؛

    & lt؛ سیکشن کلاس = "سکرین دائیں" اور جی ٹی؛
       & lt؛ H1 اور GT؛ خواتین فیشن اور ایل ٹی؛ / H1 اور GT؛
        & lt؛ بٹن اور جی ٹی؛
          & lt؛ ایک href = "#" کلاس = "بٹن" اور جی ٹی؛ مزید جانیں اور ایل ٹی؛ / A & GT؛
        & lt؛ / بٹن اور جی ٹی؛
     & lt؛ / سیکشن اور GT؛ 

03. SASS متغیرات کا پتہ لگائیں

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

 / ** متغیرات ** /

$ کنٹینر- BGColor: # 444؛
$ بائیں-BGColor: RGBA (136، 226، 247، 0.7)؛
$ بائیں-بٹن-ہور: آر جی بی اے (94، 226، 247، 0.7)؛
$ دائیں-BGColor: RGBA (227، 140، 219، 0.8)؛
$ دائیں بٹن - ہور: RGBA (255، 140، 219، 0.7)؛
$ ہور چوڑائی: 75٪؛
$ چھوٹی چوڑائی: 25٪؛
$ animatespeed: 1000ms؛ 

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

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

 ایچ ٹی ایم ایل، جسم {
  پڈنگنگ: 0؛
  مارجن: 0؛
  فونٹ-خاندان: 'کھولیں سینس'، سینسر سیرف؛
  چوڑائی: 100٪؛
  اونچائی: 100٪؛
  اوور بہاؤ-ایکس: پوشیدہ؛
} 

05. سیکشن عنوانات انداز

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

 h1 {
  فونٹ سائز: 5rem؛
  رنگ: #fff؛
  پوزیشن: مطلق؛
  بائیں: 50٪؛
  اوپر: 20٪؛
  ٹرانسمیشن: ترجمہ ترجمہ (-50٪)؛
  وائٹ خلائی: Nowrap؛

  فونٹ-خاندان: 'Playfair ڈسپلے'، سیرف؛
} 

06. CTAS کھڑے ہو جاؤ

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

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

اہم بٹنوں کو ایک اچھا آسان ہور اثر پڑے گا اور ہم اس رنگ کے لئے مخصوص SASS متغیر استعمال کریں گے، جو صفحے کے پس منظر میں ایک ہی رنگ ہو گا.

 .Screen.left .Button: ہور {
  پس منظر کا رنگ: $ بائیں بٹن-ہور؛
  سرحد رنگ: $ بائیں بٹن-ہور؛
}

.screen.right .button: ہور {
  پس منظر کا رنگ: $ دائیں بٹن-ہور؛
  سرحد رنگ: $ دائیں بٹن-ہور؛ 

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

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

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

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

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

. اسکرین. left {
  بائیں: 0؛
  پس منظر: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg' سینٹر سینٹر نمبر دوبارہ نہیں؛
  پس منظر کا سائز: کور؛
  
    & amp؛: پہلے {
       پوزیشن: مطلق؛
      مواد: ""؛
      چوڑائی: 100٪؛
      اونچائی: 100٪؛
      پس منظر: $ بائیں-BGColor؛
    }
} 

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

. اسکرین. رائٹ {
  دائیں: 0؛
  پس منظر: یو آر ایل ('https://prewiew.ibb.co/mtopcr/seth_doyle_82563_1.jpg') سینٹر سینٹر نمبر دوبارہ؛
  پس منظر کا سائز: کور؛
  
   & amp؛: پہلے {
      پوزیشن: مطلق؛
      مواد: ""؛
      چوڑائی: 100٪؛
      اونچائی: 100٪؛
      پس منظر: $ دائیں-BGColor؛
    }
} 

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

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

 .screen.left، .screen.right،. اسکرین .right: پہلے، .screen.left: اس سے پہلے {
  منتقلی: $ animatespeed تمام آسانی سے باہر؛
} 

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

 .وہ بائیں .لائی {
  چوڑائی: $ ہور چوڑائی؛
}

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

یہ بالکل بائیں طرف کے طور پر بالکل کام کرتا ہے، جہاں جاوا اسکرپٹ کا استعمال کرتے ہوئے ماؤس ہور پر ایک نئی کلاس شامل کی جائے گی، اور صحیح سکرین اس کے مطابق بڑھ جائے گی. ہمیں اس بات کا یقین کرنے کی بھی ضرورت ہے Z-index. سیٹ کیا گیا ہے 2. لہذا CTA بٹن زیادہ اہم ہو جاتا ہے.

 .وہ دائیں .آپ کا حق {
  چوڑائی: $ ہور چوڑائی؛
}

.وہ دائیں .لائی {
  چوڑائی: $ چھوٹی چوڑائی؛
}

.وہ - دائیں .لائی: پہلے سے پہلے {
  Z-index: 2؛
} 

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

ہم وینیلا جاوا اسکرپٹ کے ایک رابطے کا استعمال کرتے ہوئے ہمیں سی ایس ایس کلاسوں کو شامل کرنے اور ہٹانے میں مدد کرنے کے لئے استعمال کریں گے اور ہم کچھ نیا ES6 خصوصیات میں سے کچھ استعمال کرتے ہیں. ہمیں ایسا کرنے کی ضرورت ہے کہ پہلی چیز کچھ مسلسل متغیر کا اعلان کرنا ہے.

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

 COST DOC = دستاویز؛ 

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

 CONTIVE درست = doc.queryselector (". دائیں")؛
CONT بائیں = doc.queryselector ("بائیں")؛
CONST کنٹینر = doc.queryselector (". کنٹینر")؛ 

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

 // ہور پر کنٹینر عنصر پر ایک کلاس جوڑتا ہے
بائیں. ایڈوانٹ لسٹینر ("ماؤس انٹرفیس"، () = & gt؛ {
  کنٹینر. Classlist.add ("ہور بائیں")؛
})؛ 

11. کلاس میں شامل کریں اور ہٹا دیں

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

 // اس کلاس کو ہٹاتا ہے جو ہور پر شامل کیا گیا تھا
بائیں. ایڈوانٹ لسٹینر ("mouseleave"، () = & gt؛ {
  کنٹینر. classlist.remove ("ہور بائیں")؛
})؛ 

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

 Right.addeventlistener ("ماؤس انٹرفیس"، () = & gt؛ {
  کنٹینر. Classlist.add ("ہور دائیں")؛
})؛

Right.addeventlistener ("mouseleave"، () = & gt؛ {
  کنٹینر. classlist.remove ("ہور دائیں")؛
})؛ 

12. اسے قبول کرو

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

 media (زیادہ سے زیادہ چوڑائی: 800px) {
  H1 {
    فونٹ سائز: 2rem؛ }

  .button {
    چوڑائی: 12rem؛
  } 

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

 media (زیادہ سے زیادہ اونچائی: 700px) {
  .button {
    اوپر: 70٪؛
}}} 

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

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

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

مزید پڑھ:

• 5 حساس نئی ویب سائٹس سے حوصلہ افزائی کی جائے گی
• ایک متحرک 3D متن اثر بنائیں
• 19 عظیم Parallax طومار ویب سائٹس