Slick UI انیمیشن تشکیل دیں

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

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

• 15 قبول ویب ڈیزائن سبق

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

کیا آپ سائٹ بنانے کے لئے براہ راست آلہ چاہتے ہیں؟ ایک شاندار استعمال کریں ویب سائٹ بلڈر .

01. سیٹ اپ

کوڈڈ کھولنے اور ایک نیا قلم بنانا شروع کر کے شروع کریں. ہم بوٹسٹریپ 4 اور SASS (SASSS) استعمال کرنے جا رہے ہیں، لہذا اس بات کو یقینی بنائیں کہ ترتیبات میں آپ کو بوٹسٹریپ سی ایس ایس اور جے ایس میں آپ کے وسائل کے لنکس کے طور پر شامل ہیں اور سی ایس ایس ایس ایس ایس کو بھی شامل ہیں. ایک اور وسائل کا لنک آپ کو شامل کرنے کی ضرورت ہوگی فونٹ بہت اچھے ہے، جو ہم اپنے سماجی شبیہیں کے لئے استعمال کریں گے.

02. کنٹینرز، قطار اور کالم بنائیں

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

 & lt؛ ڈوی کلاس = "کنٹینر" اور جی ٹی؛
 & lt؛ ڈوی کلاس = "قطار" اور جی ٹی؛
 & lt؛ div class = "Col-MD-3" اور GT؛
 & lt؛! - یہاں تصویر کا لنک اور رنگ شامل کریں
 & lt؛ / div & gt؛
 & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

03. پروفائل تصویر اور رنگ مقرر کریں

پہلی پروفائل UI عنصر ہم ایک خاتون ٹیم کے رکن کے لئے شروع کریں گے اور وہ نیلے رنگ کی ٹیم کا حصہ بنیں گے. رنگ نیلے رنگ نامی کلاس کا استعمال کرتے ہوئے بیان کیا جائے گا اور اصل رنگ آخر میں SASS متغیر کا استعمال کرتے ہوئے بیان کیا جائے گا، جس میں ہم بعد میں قدم میں کریں گے. اس کے بعد ہمیں ایک تصویر میں شامل کرنے کی ضرورت ہوگی اور اسے تصویر کہا جاتا ہے.

 & lt؛ ڈوی کلاس = "ٹیم بلیو" اور جی ٹی؛
    & lt؛ ڈوی کلاس = "تصویر" اور جی ٹی؛
       & lt؛ img src = "https://image.ibb.co/kcbgmage.profile_test02.jpg" alt = "libby" & gt؛
     & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

04. پروفائل کا نام اور عنوان شامل کریں

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

 & lt؛ div class = "پروفائل-txt" & gt؛
      & lt؛ H1 کلاس = "عنوان" اور GT؛ Libby & lt؛ / h1 & gt؛
      & lt؛ اسپین کلاس = "پوزیشن" اور جی ٹی؛ ویب ڈیزائنر اور ایل ٹی؛ / اسپین اور جی ٹی؛
   & lt؛ / div & gt؛
          & lt؛ یو ایل کلاس = "سماجی شبیہیں" اور جی ٹی؛
       & lt؛ لی & gt؛ & lt؛ a href = "" کلاس = "fa fa-facebook" & gt؛ & lt؛ / & gt؛ & lt؛ / li & gt؛
       & lt؛ لی & gt؛ & lt؛ a href = "" کلاس = "fa fa-twitter" & gt؛ & lt؛ / & gt؛ & lt؛ / li & gt؛
       & lt؛ لی & gt؛ & lt؛ a href = "" کلاس = "fa fa-linkedin" & gt؛ & lt؛ / & gt؛ & lt؛ / l & gt؛
       & lt؛ لی & gt؛ & lt؛ a href = "" کلاس = "fa fa-dribbble" & gt؛ & lt؛ / & gt؛ & lt؛ / li & gt؛
    & lt؛ / ul & gt؛
 & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

05. SASS متغیر مقرر کریں

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

 $ بلیو گریجویٹ: آر جی بی اے (103، 188، 223، 8)؛
$ LightGreen: RGBA (188، 219، 183، 5)؛
$ سبز: RGBA (119، 180، 109، 0.5)؛
$ سبز سرحد: آر جی بی اے (171، 221، 164، 0.5)؛
$ نیلے رنگ: آر جی بی اے (80، 205، 227، 1)؛
$ نیلے سرحد: آر جی بی اے (147، 223، 236، 1)؛ 

06. پس منظر کی تصویر اپ لوڈ کریں

چیزوں کو مزید اپیل کرنے کے لۓ، ہم جسم پر ایک اچھی پس منظر کی تصویر دیکھیں گے. یہاں ہم متغیرات کا پہلا سیٹ استعمال کرسکتے ہیں اور پس منظر کی تصویر کو ایک خوشگوار تدریسی اوورلے کو دے سکتے ہیں جو ہلکے سبز سے نیلے رنگ سے جاتا ہے. اس کے بعد ہماری پس منظر کی تصویر کو مکمل طور پر ذمہ دار بنانے کے لئے، ہم قیمت اونچائی 100h تک مقرر کریں گے.

 جسم {
 پس منظر: لکیری-گریجویٹ (دائیں، $ lightgreen، $ نیلے رنگ)، یو آر ایل ('https://image.ib.co/mddpu7/clouds_corffield_countyside_158827.jpg') مرکز کوئی بار بار؛
 پس منظر کا سائز: کور؛
 پوزیشن: رشتہ دار؛
 اونچائی: 100vh؛
 } 

07. پروفائل پس منظر اور تصویر منتخب کریں

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

 .میں {
 Padding: 30px 0 40px؛
 مارجن-سب سے اوپر: 60px؛
 پس منظر: #FFF؛
 متن سیدھا: مرکز؛
 چھپا ہوا رساو؛
 پوزیشن: رشتہ دار؛
 کرسر: پوائنٹر؛
 باکس سائے: 0 0 25px 1px RGBA (0،0،0،0.3)؛
 .photo {
 ڈسپلے: ان لائن بلاک؛
 چوڑائی: 130px؛
 اونچائی: 130px؛
 مارجن-نیچے: 50px؛
 پوزیشن: رشتہ دار؛
 Z-index: 1؛
 }
 } 

08. حرکت پذیری شامل کریں

ہم آہنگی کا پہلا ٹکڑا ہم شامل کریں گے ہمارے پروفائل عنصر کے سب سے اوپر ہو جائے گا. خیال یہ ہے کہ جب ہم پورے عنصر پر ہور کرتے ہیں تو، نیلے سرکلر شکل کو متحرک ہو جائے گا. ہم اس بات کو کنٹرول کرسکتے ہیں کہ ہم اس کی پوزیشن کی وضاحت کرتے ہوئے کتنے نیلے رنگ کو دیکھ سکتے ہیں. تو اس فیصد کے ارد گرد کھیلنا اور آپ کو یہ کام کیسے ملے گا. آپ کبھی نہیں جانتے ہیں: آپ بھی بہتر اثر کو تلاش کر سکتے ہیں!

 .BLUE .فوٹو: پہلے سے پہلے {
 مواد: ""؛
 چوڑائی: 100٪؛
 اونچائی: 0px؛
 سرحدی ردعمل: 50٪؛
 پس منظر: $ نیلے رنگ؛
 پوزیشن: مطلق؛
 نیچے: 130٪؛
 دائیں: 0؛
 بائیں: 0؛
 ٹرانسمیشن: پیمانہ (3)؛
 منتقلی: تمام .3s لکیری 0s؛
}
.team: ہور .فوٹو: پہلے سے پہلے {
 اونچائی: 100٪؛
} 

09. ٹیم تصویر کو متحرک کریں

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

 .بھی .pic: کے بعد {
 مواد: ""؛
 چوڑائی: 100٪؛
 اونچائی: 100٪؛
 سرحدی ردعمل: 50٪؛
 پس منظر: $ نیلے رنگ؛
 پوزیشن: مطلق؛
 اوپر: 0؛
 بائیں: 0؛
 Z-index: 1؛
}
.team .photo img {
 چوڑائی: 100٪؛
 اونچائی: آٹو؛
 سرحدی ردعمل: 50٪؛
 ٹرانسمیشن: پیمانے (1)؛
 منتقلی: تمام 0.9s آسانی سے 0s؛
}
بلاک: ہور .فوٹو img {
 باکس سائے: 0 0 0 14px $ نیلے سرحد؛
 ٹرانسمیشن: پیمانے (0.6)؛
 }

10. پروفائل کا نام اور پوزیشن حاصل کریں

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

. profile-txt {
 مارجن-نیچے: 30px؛
 tittle {
 فونٹ سائز: 2rem؛
 فونٹ وزن: 700؛
 رنگ: # 333؛
 خط وقفہ کاری: 1.5px؛
 متن ٹرانسمیشن: سرمایہ کاری؛
 مارجن-نیچے: 6px؛
 }
 .position {
 ڈسپلے: بلاک؛
 فونٹ سائز: 1rem؛
 رنگ: # 555؛
 }
} 

11. سماجی شبیہیں شامل کریں

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

. بلیوئل شبیہیں {
 چوڑائی: 100٪؛
 فہرست سٹائل: کوئی بھی نہیں؛
 پڈنگنگ: 0؛
 مارجن: 0؛
 پس منظر: $ نیلے رنگ؛
 پوزیشن: مطلق؛
 نیچے: -100px؛
 بائیں: 0؛
 منتقلی: تمام 0.6s آسانی؛
 لی {
 ڈسپلے: ان لائن بلاک؛
 
 {
 ڈسپلے: بلاک؛
 Padding: 8px؛
 فونٹ سائز: 1rem؛
 رنگ: #fff؛
 متن سجاوٹ: کوئی بھی نہیں؛
 منتقلی: تمام 0.5S آسانی؛
 & amp؛: hover {
 رنگ: $ نیلے رنگ؛
 پس منظر: #FFF؛
 }
 }
 }
}
.team: ہور .آئیلیل شبیہیں {
 نیچے: 0px؛
} 

12. گرین ٹیم کے رکن بنائیں

چیزوں کو تھوڑا سا ملانے کے لئے، ہم اپنی ٹیم میں مزید اراکین کو شامل کرنے کے لئے شروع کر سکتے ہیں. رنگ ہم اس کے لئے استعمال کریں گے اگلے ایک سبز ہو جائے گا. لیکن سب سے پہلے HTML سیکشن / فائل میں واپس جائیں اور ہم سب کو کرنے کی ضرورت ہے COL-MD-3 کلاس کاپی کریں - سوشل شبیہیں کے تحت آخری ڈوی ٹیگ پر قطار نہیں ہے اور اسے پیسٹ کریں.

 & lt؛ ڈوی کلاس = "ٹیم گرین" اور جی ٹی؛
 & lt؛ ڈوی کلاس = "تصویر" اور جی ٹی؛
 & lt؛ img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt؛
 & lt؛ / div & gt؛ 

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

. گرین: ہور .فوٹو img {
 باکس سائے: 0 0 14px $ سبز سرحد؛
 ٹرانسمیشن: پیمانے (0.6)؛
 }
. گرین .فوٹو: پہلے سے پہلے {
 مواد: ""؛
 چوڑائی: 100٪؛
 اونچائی: 0px؛
 سرحدی ردعمل: 50٪؛
 پس منظر: $ سبز؛
 پوزیشن: مطلق؛
 نیچے: 135٪؛
 دائیں: 0؛
 بائیں: 0؛
 ٹرانسمیشن: پیمانہ (3)؛
 منتقلی: تمام .3s لکیری 0s؛
}
. گرین .آئیلیل شبیہیں {
 چوڑائی: 100٪؛
 فہرست سٹائل: کوئی بھی نہیں؛
 پڈنگنگ: 0؛
 مارجن: 0؛
 پس منظر: $ سبز؛
 پوزیشن: مطلق؛
 نیچے: -100px؛
 بائیں: 0؛
 منتقلی: تمام 0.6s آسانی؛
 لی {
 ڈسپلے: ان لائن بلاک؛
 {
 ڈسپلے: بلاک؛
 Padding: 8px؛
 فونٹ سائز: 1rem؛
 رنگ: #fff؛
 متن سجاوٹ: کوئی بھی نہیں؛
 منتقلی: تمام 0.5S آسانی؛
 & amp؛: hover {
 رنگ: $ سبز؛
 پس منظر: #FFF؛
 }
 }
 }
} 

اور اس نقطہ نظر کی خوبصورتی یہ ہے کہ آپ بہت سے مختلف رنگوں کی کلاسوں کے لئے ضروری طور پر دوبارہ کر سکتے ہیں، آپ کو آپ کے UI حرکت پذیری کے طور پر آپ کو ذیلی طور پر مرکزی خیال، موضوع کے لئے قابل بنا سکتے ہیں.

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

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

UI حرکت پذیری کے اندر اور آؤٹ کے بارے میں مزید جاننا چاہتے ہیں؟

اگر آپ اس بارے میں مزید جاننے میں دلچسپی رکھتے ہیں کہ آپ اپنی سائٹس پاپ اور چیکک UI حرکت پذیری کا استعمال کرتے ہوئے چمک کیسے کرسکتے ہیں، اس بات کو یقینی بنائیں کہ آپ نے اپنا ٹکٹ اٹھایا ہے لندن پیدا .

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

19-21 ستمبر 2018 تک لندن پیدا ہوتا ہے. اب اپنا ٹکٹ حاصل کرو .

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

• موبائل اطلاقات میں حرکت پذیری کا استعمال کیسے کریں
• UI ڈیزائن کے لئے پرو کا گائیڈ
• انٹرفیس متحرک ڈیزائن کرنے کے لئے ایک ابتدائی گائیڈ