ویب پیج کو انٹرایکٹو بنانے کا ایک طاقت ور ترین طریقہ سی ایس ایس ہے۔ یہ ہمارے بنیادی کی شکل و صورت کو بدل دیتا ہے ویب صفحہ. سی ایس ایس پیش کرتا ہے کہ ایک اہم اور دلچسپ خصوصیت یہ ہے کہ وہ ہمیں متحرک حرکتیں انجام دینے دیتی ہے۔ یہ ہمیں اپنے صفحے کے اندر عناصر کو منتقل کرنے کی اجازت دیتا ہے۔ آئیے ، سی ایس ایس میں اپنا متحرک زندگی کا سفر درج ذیل ترتیب میں شروع کریں:
CSS میں متحرک تصاویر
ہماری ویب سائٹ میں متحرک تصاویر کا اضافہ صارفین کی توجہ مبذول کرنے کا ایک عمدہ طریقہ ہے۔ اس سے نہ صرف ہمارے صفحے کی قدر میں اضافہ ہوتا ہے بلکہ صارف کے تجربے کو بھی تقویت ملتی ہے۔ سی ایس ایس میں حرکت پذیری دو حصوں پر مشتمل ہے۔ وہ ہیں
جاوا میں تعطل کو کیسے روکا جائے
- کی فریمز
- حرکت پذیری
سی ایس ایس متحرک تصاویر تمام برائوزر میں معاون ہیں۔ تاہم ، کچھ پرانے براؤزر جیسے سفاری (ورژن 8.0 تک) کو حرکت پذیری کی خصوصیات کی تشریح کرنے کے لئے سابقہ (-webkit-) کی ضرورت ہوتی ہے۔ مثال کے طور پر:
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: لائٹ بلیو پوزیشن: رشتہ دار بارڈر رداس: 100٪ -Webkit - حرکت پذیری کا نام: cssanim / * پرانے براؤزر * / -ویبکیٹ-حرکت پذیری کا دورانیہ: 5s / * پرانے براؤزر * / حرکت پذیری -name: cssanim حرکت پذیری کا دورانیہ: 5s} / * پرانے براؤزر * / @ -webkit-keyframes cssanim {0٪ {بائیں: 0px} 100٪ {بائیں: 300px}}keyframes cssanim {0٪ {بائیں: 0px} 100 ٪ {باقی: 300px}ہم اوپر سے نمونہ HTML صفحے کا استعمال کرسکتے ہیں اور مزید مثالوں کی کوشش کرنے کے لئے اسٹائل ٹیگ میں سی ایس ایس کوڈ کو تبدیل کرسکتے ہیں۔
سی ایس ایس میں کلیدی الفاظ
یہ CSS میں متحرک تصاویر کا بلڈنگ بلاک ہے۔ یہ ہمارے ویب پیج پر حرکت پذیری کے مخصوص لمحات اور اسٹائل کی وضاحت کرتا تھا۔ دوسرے الفاظ میں ، جب ہم @ CSSFrames کو اپنے CSS کے اندر مختص کرتے ہیں تو ، موجودہ حالت کو نئی حالت میں تبدیل کرنے یا ایک خاص مدت کے لئے اشیاء کو متحرک کرنے کا کنٹرول حاصل ہوجاتا ہے۔
اینیمیشن کو کنٹرول کرنے کے لئےکیفریموں کے پاس کچھ خصوصیات رکھنے کی ضرورت ہے جیسے حرکت نام کا نام ، مراحل اور خواص۔
نام - ہر حرکت پذیری کے طرز عمل کو بیان کرنے کیلئے ایک نام ہونا ضروری ہے۔
مراحل - اسٹیج حرکت پذیری کی تکمیل کی نمائندگی کرتا ہے۔ اس کو 'to' اور 'منجانب' کلیدی لفظ کے ساتھ یا فیصد کے طور پر بھی دکھایا جاسکتا ہے ، جبکہ 0٪ شروعاتی حالت کی نمائندگی کرتا ہے اور 100٪ حرکت پذیری کی آخری حالت کی نمائندگی کرتا ہے۔ فیصد نمائندگی کو استعمال کرنے کا فائدہ یہ ہے کہ ہم ایک سے زیادہ انٹرمیڈیٹ مرحلے کی وضاحت کرسکتے ہیں یعنی 50. مرحلے یا 75٪ وغیرہ پر حرکت پذیری کا طرز عمل کیا ہونا چاہئے۔
پراپرٹیز - یہ خصوصیات ہمیں حرکت پذیری کے دوران جوڑتوڑ کرنے کے لئےkeyframes پر کنٹرول فراہم کرتی ہیں۔
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: lightblue کی پوزیشن: رشتہ دار کی حد-رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 5s keykeyframes cssanim {0٪ {transform: پیمانہ (0.5) دھندلاپن: 0} 50 ٪ {ٹرانسفارم: اسکیل (1.5) دھندلاپن: 1} 100٪ {ٹرانسفارم: اسکیل (1)}اب چونکہ ہم کلیدی الفاظ کی تعریف کے بارے میں واضح ہیں۔ آئیے ہمیں اپنے عناصر اور اشیاء کو متحرک کرنے کے طریقہ کی وضاحت کرنے کے لئے متحرک خصوصیات کو تلاش کریں۔ دو املاک یعنی وراثت اور ابتدائی حرکت پذیری کی تمام اقسام کے ساتھ استعمال ہوسکتی ہیں۔ یہ خصوصیات عام طور پر مختلف رویوں کی نمائش کے لئے Div ٹیگ کے ساتھ استعمال ہوتی ہیں۔
ابتدائی: اس پراپرٹی کو اس کی ڈیفالٹ ویلیو پر سیٹ کرتا ہے۔
وارث: اس پراپرٹی کو اس کے بنیادی عنصر سے وراثت میں دیتی ہے۔
حرکت پذیری کی خصوصیات
- حرکت پذیری کا نام
یہ حرکت پذیری کا نام بتاتا ہے ، جو جوڑ توڑ کے لئےkeyframes میں استعمال ہوتا ہے۔ممکن اقدار یہ ہیں:
- نام: یہ حرکت پذیری کے کلید فریم کے پابند ہونے کے لئے نام کی وضاحت کرتا ہے۔
- کوئی نہیں: یہ ڈیفالٹ قدر ہے اور وراثت میں پائے جانے والے یا کاسکیڈنگ متحرک تصاویر کو اوور رائڈ کرنے کے لئے استعمال ہوسکتی ہے۔
نحو:
حرکت پذیری کا نام: نام | کوئی نہیں | ابتدائی | وارث
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: لائٹ بلیو پوزیشن: رشتہ دار سرحد-رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 5s}keyframes cssanim {0٪ {بائیں: 0px} 100٪ {بائیں: 300px} }- حرکت پذیری کی مدت
یہ ایک حرکت پذیری کو مکمل کرنے میں حرکت پذیری کے ل takes وقت کی وضاحت کرتا ہے۔ اس کی وضاحت سیکنڈز یا ملی سیکنڈ (جیسے 4s یا 400 ملی میٹر) میں کی گئی ہے۔ اس پراپرٹی کی ڈیفالٹ ویلیو 0s ہے ، لہذا اگر یہ پراپرٹی مخصوص نہیں کی گئی ہے تو پھر حرکت پذیری نہیں ہوگی۔
نحو:
حرکت پذیری کی مدت: وقت
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: نیلی پوزیشن: رشتہ دار سرحد رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 4s}keyframes cssanim {0٪ {transform: पैमाने (0.4) دھندلاپن: 0} 50 ٪ {ٹرانسفارم: اسکیل (1.4) دھندلاپن: 1} 100٪ {ٹرانسفارم: اسکیل (1)}- حرکت پذیری - تاخیر
حرکت پذیری میں تاخیر کی خاصیت ہمیں حرکت پذیری میں تاخیر کی وضاحت کرنے کی اجازت دیتی ہے۔ یہ وضاحت کرتا ہے کہ جب حرکت پذیری کی ترتیب عمل درآمد شروع ہوگی۔
اس پراپرٹی کی قیمت کسی سیکنڈ (سیکنڈ) یا ملی سیکنڈ (ایم ایس) میں اعلان کی جاسکتی ہے۔ یہ مثبت اور منفی دونوں اقدار کو تھام سکتا ہے۔ ایک مثبت قدر سے پتہ چلتا ہے کہ حرکت پذیری متعین وقت گزرنے کے بعد شروع ہوجائے گی اور تب تک یہ غیر منقسم رہے گی۔ دوسری طرف ، ایک منفی قدر فوری طور پر نقطہ نظر سے حرکت پذیری کو شروع کردے گی جیسے یہ پہلے سے ہی کسی مقررہ ٹائم فریم کے لئے کام کررہی ہو۔
نحو:
حرکت پذیری - تاخیر: وقت
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: lightblue کی پوزیشن: رشتہ دار کی حد-رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 4s حرکت پذیری - تاخیر: 4s} @ کیفرامیس cssanim {0٪ {بائیں: 0 px} 100٪ {بائیں: 250px}- حرکت پذیری - تکرار شمار
یہ خاصیت اس بات کی نشاندہی کرتی ہے کہ انیمیشن تسلسل کو چلانے کی تعداد۔ اس پراپرٹی کی ڈیفالٹ ویلیو 1 ہے۔ممکن اقدار یہ ہیں:
- نمبر - تکرار کی تعداد کو ظاہر کرتا ہے
- لامحدود - اشارہ کرتا ہے کہ حرکت پذیری کو ہمیشہ کے لئے دہرانا چاہئے
نحو:
حرکت پذیری - تکرار-شمار: نمبر | لامحدود
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: lightblue کی پوزیشن: رشتہ دار کی حد-رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 2s حرکت پذیری-اعداد شمار: 4}کیفرامس cssanim {0٪ {بائیں: 0 px} 100٪ {باقی: 100px}- حرکت پذیری کی سمت
یہ حرکت پذیری کی سمت کی وضاحت کرتا ہے۔ عنصر کی سمت آگے ، پسماندہ یا متبادل سائیکل میں کھیلنے کے لئے مقرر کی جاسکتی ہے۔اس پراپرٹی کی ڈیفالٹ ویلیو معمول کی بات ہے ، اور یہ ہر ایک سائیکل پر دوبارہ سیٹ ہوجاتی ہے۔ممکن اقدار یہ ہیں:
عام - یہ پہلے سے طے شدہ سلوک ہے اور آگے حرکت پذیری چلائی جاتی ہے۔ ہر چکر کے بعد حرکت پذیری اپنی ابتدائی حالت میں آجاتی ہے اور دوبارہ آگے چلائی جاتی ہے
معکوس - حرکت پذیری کو پسماندہ سمت میں کھیلا جاتا ہے۔ ہر چکر کے بعد حرکت پذیری اپنی اختتامی حالت پر پہنچ جاتی ہے اور اسے پیچھے چلایا جاتا ہے
متبادل - حرکت پذیری کی سمت الٹ ہے یعنی یہ ہر چکر پر پہلے اور پھر پیچھے کی طرف کھیلتی ہے۔ ہر عجیب سائیکل آگے حرکت پذیری کو پیش کرتا ہے اور ہر حتی سائیکل پسماندہ حرکت کو پیش کرتا ہے۔
متبادل - الٹ - حرکت پذیری کی سمت باری باری الٹ دی جاتی ہے۔ یہاں حرکت پذیری پہلے پیچھے اور پھر ہر سائیکل پر آگے چلائی جاتی ہے۔ ہر عجیب سائیکل الٹ یا پسماندہ چلتا ہے اور ہر حتی سائیکل آگے حرکت پذیری کو پیش کرتا ہے۔
نحو:
حرکت پذیری کی سمت: عام | ریورس |متبادل | متبادل - الٹ
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: lightblue کی پوزیشن: رشتہ دار کی حد-رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 2s حرکت پذیری-تکرار-شمار: لامحدود}keyframes cssanim {0٪ {بائیں: 0 px} 100٪ {باقی: 100px}- حرکت پذیری وقت تقریب
یہ خاصیت حرکت پذیری کے تیز رفتار وکر یا تحریک حرکت کا تعین کرتی ہے۔ یہ ایک شکل سے دوسری شکل میں آسانی سے حرکت پذیری کے انداز میں تبدیلی کے لئے تفویض کیا گیا ہے۔ اگر کوئی قدر مقرر نہیں کی گئی ہے تو یہ آسانی سے پہلے سے طے شدہ ہے۔حرکت پذیری کے وقت کی تقریب کے لئے ممکنہ قدریں یہ ہیں:
آسانی - یہ پراپرٹی کی ڈیفالٹ ویلیو ہے۔ یہاں حرکت پذیری آہستہ آہستہ شروع ہوتی ہے ، آہستہ آہستہ وسط میں تیز ہوجاتی ہے اور پھر آہستہ آہستہ ختم ہوجاتی ہے۔
لکیری - حرکت پذیری پورے چکر میں ایک ہی رفتار کو برقرار رکھتی ہے یعنی شروع سے آخر تک۔
آسانی - حرکت پذیری آہستہ آہستہ شروع ہوتی ہے۔
آسانی سے باہر - حرکت پذیری آہستہ آہستہ ختم ہوتی ہے۔
آسانی سے باہر - حرکت پذیری شروع اور اختتام کے دوران آہستہ آہستہ چلتی ہے۔
کیوبک-بیزیئر (این ، این ، این ، این) - یہ اعلی درجے کی خصوصیت ہمیں اپنی اقدار کی وضاحت کرکے اپنی مرضی کے مطابق ٹائمنگ فنکشن تشکیل دیں۔ ممکنہ قیمت 0 سے 1 تک ہوتی ہے۔
نحو:
حرکت پذیری کا وقت تقریب: لکیری | آسانی | آسانی سے باہر | آسانی میں | آسانی سے میں |کیوبک-بیزیئر (این ، این ، این ، این)
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: لائٹ بلو پوزیشن: نسبتہ بارڈر رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 2s حرکت پذیری کی سمت: الٹ}keyframes cssanim {0٪ {پس منظر: نارنگی بائیں: 0px } 50٪ {پس منظر: زرد بائیں: 200px ٹاپ: 200px} 100٪ {پس منظر: نیلے بائیں: 100px}- حرکت پذیری بھریں
یہ ایک خاص خاصیت ہے کیونکہ یہ حرکت پذیری سے پہلے یا اس کے بعد حرکت اندازی کا انداز طے کرتا ہے۔بطور ڈیفالٹ ، عنصر کا انداز متحرک حرکت سے شروع سے پہلے یا ختم ہونے کے بعد متاثر نہیں ہوتا ہے۔ یہ خاصیت مفید ہے کیونکہ یہ حرکت پذیری کے اس طے شدہ طرز عمل کو زیر کرنے میں معاون ہے۔اینیمیشن فل - موڈ پراپرٹی کیلئے مندرجہ ذیل ممکنہ اقدار ہیں۔
کوئی نہیں - یہ پراپرٹی کی ڈیفالٹ ویلیو ہے یعنی حرکت پذیری سے پہلے یا اس کے بعد عنصر پر حرکت پذیری اسٹائل کا اطلاق نہیں ہوتا ہے۔
فارورڈز - انیمیشن کو حتمی حرکت پذیری ترتیب میں عنصر کے ذریعہ برقرار رکھا جاتا ہے یعنی حرکت پذیری ختم ہونے کے بعد۔
پیچھے کی طرف - ابتدائی حرکت پذیری ترتیب میں عنصر کے ذریعہ شیلیوں کو برقرار رکھا جاتا ہے یعنی اس سے پہلے کہ حرکت پذیری میں تاخیر کے دوران خاص طور پر حرکت پذیری کو گھور لیا جائے۔
دونوں - اس سے یہ ظاہر ہوتا ہے کہ حرکت پذیری دونوں سمت یعنی اگلے اور پیچھے کی طرف چل پڑے گی
نحو:
حرکت پذیری پر موڈ: کوئی نہیں | فارورڈز | پیچھے کی طرف | دونوں
.anim {چوڑائی: 50px اونچائی: 50px پس منظر: لائٹ بلو رنگ: سفید فونٹ وزن: جرات مندانہ پوزیشن: رشتہ دار حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 5s حرکت پذیری-تکرار-شمار: لامحدود بارڈر رداس: 100٪} # anim1 { حرکت پذیری کے وقت کی تقریب: آسانی سے an # anim2 {حرکت پذیری وقت کی تقریب: لکیری} # anim3 {حرکت پذیری کا وقت-فنکشن: آسانی میں} # anim4 {حرکت پذیری کے وقت کی تقریب: آسانی سے آؤٹ} # anim5 {حرکت پذیری- ٹائمنگ فنکشن: ایزی ان ان آؤٹ}کیفریز سیسنیم {سے {بائیں: 0px} سے {بائیں: 400px}}- حرکت پذیری کی حالت
یہ خاصیت حرکت پذیری میں یا موقوف حالت میں ہونے کے لئے ایک حرکت پذیری کی وضاحت کرتی ہے۔ نیز ، جب کسی حرکت پذیری کو توقف سے دوبارہ شروع کیا جاتا ہے تو وہ اسی جگہ سے شروع ہوتا ہے جہاں سے وہ چھوڑا تھا۔ممکن اقدار یہ ہیں:
- کھیلنا - چلانے میں حرکت پذیری کو پیش کرنے کے لئے
- موقوف - حرکت پذیری کو موقوف حالت میں پیش کرنا۔
نحو:
حرکت پذیری کی حالت: موقوف | کھیلنا
.anim {چوڑائی: 100px اونچائی: 100px پس منظر: لائٹ بلیو پوزیشن: رشتہ دار حرکت پذیری کا نام: cssanim حرکت پذیری کی میعاد: 3s حرکت پذیری - تاخیر: 2s حرکت پذیری-موڈ: پیچھے کی طرف کا حد - 100٪ keykeyframes cssanim {0٪ {سب سے اوپر: 0 px پس منظر کا رنگ: اورینج} 50٪ {سب سے اوپر: 0px پس منظر کا رنگ: سبز} 100٪ {سب سے اوپر: 100px پس منظر کا رنگ: نیلا}- حرکت پذیری
اسے حرکت پذیری شارٹ ہینڈ پراپرٹی کے نام سے جانا جاتا ہے۔ یہ کلینر کوڈ کے لئے استعمال کیا جاتا ہے۔ ایک بار جب ہم تمام متحرک خصوصیات سے عادی ہوجائیں تو ، یہ مشورہ دیا جاتا ہے کہ ہم متحرک شارٹ ہینڈ کو تیزی سے کوڈ کرنے اور تمام خصوصیات کو ایک ہی لائن میں متعین کرنے کے لئے استعمال کریں۔
نحو:
حرکت پذیری: [حرکت پذیری نام] | [حرکت پذیری کی مدت] | [حرکت پذیری وقت سازی] |[حرکت پذیری - تاخیر] | [حرکت پذیری - تکرار شمار] | [حرکت پذیری کی سمت] |[حرکت پذیری - موڈ موڈ] | [حرکت پذیری کی حالت]
شارٹ ہینڈ کا استعمال کرکے ہم سبھی متحرک اثرات جو مختلف انیمیشن خصوصیات کا استعمال کرکے اوپر دکھاتے ہیںحرکت پذیری پراپرٹی
.anim {اونچائی: 200px چوڑائی: 200px پس منظر: lightblue کی پوزیشن: رشتہ دار سرحد رداس: 100٪ حرکت پذیری کا نام: cssanim حرکت پذیری کا دورانیہ: 2s حرکت پذیری کی سمت: عام حرکت پذیری کی حالت: رک گیا keyکیفرامز cssanim {0٪ {پس منظر: اورینج ٹاپ: 0px} 50٪ {پس منظر: پیلے رنگ کا بائیں: 200px ٹاپ: 200px} 100٪ {پس منظر: نیلا بائیں: 100px}}اس سے تمام متحرک خصوصیات کا اختتام ہوتا ہے جو سی ایس ایس میں استعمال ہوسکتے ہیں۔ ہمیں زیادہ واضح تصویر حاصل کرنے کے لئے ان خصوصیات میں مختلف مختلف حالتوں کی کوشش کرنی چاہئے۔ جب ہم آرام سے آتے ہیں تو ، صاف ستھرا اور تیز کوڈ لکھنے میں حرکت پذیری شارٹ ہینڈ پراپرٹی میں مدد مل سکتی ہے۔ ویب ڈویلپروں کے لئے سی ایس ایس میں سیکھنے کے لئے یہ ایک اہم مہارت ہے۔ چونکہ ہم جامد چیزوں کی بجائے حرکت پذیر اشیاء پر زیادہ توجہ مرکوز کرتے ہیں ، لہذا متحرک تصاویر ہمیں اس کو حاصل کرنے میں مدد کرسکتی ہیں اور عظیم قابل ذکر ویب صفحات بھی تیار کرسکتی ہیں۔
ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔
ہمارے لئے ایک سوال ہے؟ براہ کرم 'سی ایس ایس میں متحرک تصاویر' بلاگ کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔