مواد
- 01. HTML دستاویز کا آغاز کریں
- 02. مرئی HTML مواد
- 03. سی ایس ایس کا آغاز
- 04. حرکت پذیری کنٹینر
- 05. حرکت پذیری کا آغاز
- 06. نظر میں متحرک
- 07. حرکت پذیری کو حتمی شکل دینا
کینیڈا کے جیم تھری سے محبت کی کھوئی ہوئی خوبصورتی سے اندھیرے ، موبائل سے تیار انٹرایکٹو نظم ہے جس میں کھوئے ہوئے محبت کے آس پاس کے پائیدار جذبات کے بارے میں حقیقی دل ہے۔ ویب سائٹ لے آؤٹ HTML5 کا استعمال کرتے ہوئے بنایا گیا تھا جس میں جی ایس اے پی لائبریری اپنی حرکت پذیری کو طاقتور بناتی ہے ، اس کی سب سے مرعوب خصوصیات میں سے ایک اس کی متحرک 3D تحریر ہے جو واقعی میں محبت کی گمشدگی کی شاعری کو زندہ کرتی ہے۔
- انٹرایکٹو 3D نوع ٹائپ اثرات مرتب کریں
یہ جہنم کی طرح متاثر کن نظر آتا ہے ، اور صارف کے ل experience دلچسپ تجربہ تخلیق کرنے کے ل your اپنے کام میں شامل کرنا مشکل نہیں ہے۔ یہ کیسے ہوا یہ یہاں ہے۔
اپنی منگنی والی سائٹ بنانا چاہتے ہو؟ کسی ویب سائٹ بنانے والے کے آلے کو آزمائیں ، اور صحیح ویب ہوسٹنگ سروس منتخب کرکے چیزوں کو آسانی سے چلاتے رہیں۔
01. HTML دستاویز کا آغاز کریں
پہلا قدم HTML دستاویز کی ساخت کی وضاحت کرنا ہے۔ اس میں HTML کنٹینر شامل ہے جو دستاویز کا آغاز کرتا ہے ، جس میں سر اور جسم کے حصے ہوتے ہیں۔ جبکہ ہیڈ سیکشن بنیادی طور پر بیرونی سی ایس ایس فائل کو لوڈ کرنے کے لئے استعمال ہوتا ہے ، جسمانی سیکشن مرحلہ 2 میں تیار کردہ مرئی صفحے کے مواد کو محفوظ کرے گا۔
! ڈوکیٹ ایچ ٹی ایم ایل> ایچ ٹی ایم ایل> سر> عنوان> 3 ڈی ٹیکسٹ موومنٹ / ٹائٹل> لنک rel = "اسٹائل شیٹ" ٹائپ = "ٹیکسٹ / سی ایس ایس" href = "اسٹائل سی سی ایس" /> / ہیڈ> باڈی> * * * قدم 2 یہاں / باڈی </ html>
02. مرئی HTML مواد
مرئی HTML مواد میں ایک مضمون کنٹینر ہوتا ہے جس میں مرئی متن ہوتا ہے۔ آرٹیکل کنٹینر کا اہم حصہ ’’ ڈیٹا انیمیٹ ‘‘ وصف ہے ، جو بصری اثرات کو لاگو کرنے کے لئے سی ایس ایس کے ذریعہ حوالہ دیا جائے گا۔ آرٹیکل کے اندر موجود متن کو H1 ٹیگ سے بنایا گیا ہے اس بات کی نشاندہی کرنے کے لئے کہ صفحہ صفحہ کا بنیادی عنوان ہے۔
آرٹیکل ڈیٹا انیمٹ = "میں منتقل کریں"> h1> ہیلو وہاں </ h1> / مضمون>
03. سی ایس ایس کا آغاز
ایک نئی فائل بنائیں جسے ’اسٹائلس سی ایس ایس‘ کہتے ہیں۔ ہدایات کا پہلا مجموعہ اس صفحے کے HTML کنٹینر اور جسم کو سیاہ پس منظر کے لئے مقرر کرتا ہے ، نیز کوئی مرئی وقفہ وقفہ بھی ہوتا ہے۔ صفحہ پر موجود تمام بچوں کے عناصر کے لئے سفید کو بطور ڈیفالٹ رنگین رنگ بھی مقرر کیا گیا ہے۔ متن بنانے والے رنگ کے پہلے سے طے شدہ رنگ سے گریز کرنا پوشیدہ دکھائی دیتا ہے۔
HTML ، باڈی {پس منظر: # 000؛ بھرتی: 0؛ مارجن: 0؛ رنگ: # ایف ایف؛ }
04. حرکت پذیری کنٹینر
’ڈیٹا انیمیٹ‘ وصف کے ساتھ مشمول مواد کے کنٹینر میں مخصوص اسٹائل لاگو ہوتے ہیں۔ اس کا سائز vw اور vh پیمائش یونٹوں کا استعمال کرتے ہوئے اسکرین کے پورے سائز سے ملنے کے ساتھ ساتھ تھوڑا سا گھمایا گیا ہے۔ ’مووین ان‘ کے نام سے ایک حرکت پذیری لاگو ہوتی ہے ، جو 20 سیکنڈ کے عرصے تک جاری رہے گی اور اس کا بے حد تکرار کرے گی۔
[ڈیٹا انیمیٹ = "میں منتقل"] {پوزیشن: رشتہ دار؛ چوڑائی: 100vw؛ اونچائی: 100vh؛ دھندلاپن: 1؛ حرکت پذیری: اقدام 20s لامحدود؛ متن کی سیدھ: مرکز؛ تبدیل: باری باری (20deg)؛ }
05. حرکت پذیری کا آغاز
پچھلے مرحلے میں حوالہ دیا گیا ’مووین اِن‘ حرکت پذیری کے لئےkeyframes استعمال کرتے ہوئے تعریف کی ضرورت ہے۔ حرکت پذیری کے 0 at پر شروع ہونے والا پہلا فریم پہلے سے طے شدہ فونٹ سائز ، متن کی پوزیشننگ اور مرئی سایہ طے کرتا ہے۔ مزید برآں ، شے کو صفر مبہمیت کے ساتھ مرتب کیا گیا ہے تاکہ یہ ابتدائی طور پر پوشیدہ ہو یعنی یعنی۔ نظر سے باہر ظاہر
keyframes اقدام میں {0٪ {فونٹ سائز: 1 ایم؛ بائیں: 0؛ دھندلاپن: 0؛ متن کا سایہ: کوئی نہیں؛ ST * * * قدم 6 یہاں}
06. نظر میں متحرک
اگلی فریم حرکت پذیری کے ذریعہ 10٪ رکھی گئی ہے۔ یہ فریم دھندلاپن کو مکمل طور پر دکھائی دیتا ہے ، اس کے نتیجے میں متن کو آہستہ آہستہ دیکھنے میں متحرک ہوجاتا ہے۔اضافی طور پر ، نیلے اور کم ہوتی ہوئی رنگ اقدار کے ساتھ متعدد سائے شامل کردیئے گئے ہیں تاکہ متن کو 3D گہرائی کے بھرم عطا کریں۔
10٪ {دھندلاپن: 1؛ ٹیکسٹ شیڈو: .2 ایم -.2 ایم 4px #aaa ، .4 ایم -4 ایم 4px # 777 ، .6 ایم -6 ایم 4px # 444 ، .8 م -8 م 4px # 111؛ ST * * * یہاں سات قدم رکھیں
07. حرکت پذیری کو حتمی شکل دینا
حتمی فریم 80 فیصد اور حرکت پذیری کے بالکل آخر میں ہوتا ہے۔ یہ فونٹ کا سائز بڑھانے اور عنصر کو بائیں طرف منتقل کرنے کے ذمہ دار ہیں۔ ٹیکسٹ شیڈو کو متحرک کرنے کے لئے نئی ترتیبات کا اطلاق بھی کیا جاتا ہے ، جبکہ متن کو فریم 80 from سے 100. تک ختم کردیتے ہیں۔
80٪ {فونٹ سائز: 8 ایم؛ بائیں: -8 ایم؛ دھندلاپن: 1؛ ؛ 100٪ {فونٹ سائز: 10 ایم؛ بائیں: -10 ایم؛ دھندلاپن: 0؛ متن کا سایہ: .02 م -.02 م 4px #aaa ، .04 م -04 م 4px # 777 ، .06 م -06 م 4px # 444 ، .08 م -08 م 4px # 111؛ * * *
نوٹ: آپ جو بھی پروجیکٹ شروع کر رہے ہیں ، اس کا مقابلہ کرنے والے کلاؤڈ اسٹوریج کا ہونا ضروری ہے (ہماری ہدایت نامہ مدد کرے گا)۔
یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے شمارے 273 میں شائع ہوا تھا۔ ایشو 273 یہاں خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں.
