HTML زبان ویب صفحہ کی ساخت فراہم کرتی ہے، اور CSS اس ایپلی کیشن کا ڈیزائن اور فارمیٹنگ فراہم کرتی ہے۔ یہ مجموعہ آپ کو اینیمیشن شامل کرنے کی بھی اجازت دیتا ہے، کیونکہ متحرک عناصر جامد عناصر کے مقابلے میں زیادہ پرکشش نظر آتے ہیں۔ یہ ایک عنصر کو اپنا انداز بتدریج تبدیل کرنے دیتا ہے۔
یہ مضمون رہنمائی کرے گا کہ ہم عناصر پر اینیمیشن کا اطلاق کیسے کر سکتے ہیں۔ تو، آئیے شروع کریں!
سی ایس ایس اینیمیشن کی فریمز کیا ہیں؟
اینیمیشن کو مکمل کرنے کے لیے، ہمیں اینیمیشن کو ایچ ٹی ایم ایل عنصر سے منسلک کرنا چاہیے۔ اس مقصد کے لیے کلیدی لفظ استعمال کریں ' @keyframes ' کے بعد حرکت پذیری کا نام۔ یہ جزو حرکت پذیری کے آغاز اور اختتام کی وضاحت کرتا ہے۔
سی ایس ایس اینیمیشن کی فریمز کیسے سیٹ اپ کریں؟
سی ایس ایس میں اینیمیشن کی فریم سیٹ اپ کرنے کے لیے، ہم دو مثالیں دیکھیں گے۔
مثال 1
CSS میں اینی میشن کی فریمز ترتیب دینے کے لیے، درج ذیل اقدامات کریں:
-
- کلاس نام کے ساتھ ایک شامل کریں ' main-div '
- div کے اندر، کلاس کے نام کے ساتھ ایک اور div شامل کریں ' img-peng '
- اس img-peng div کے اندر، تصویر لگانے کے لیے
شامل کریں۔ اس ٹیگ میں تین صفات ہیں، ' src 'تصویر کا راستہ فراہم کرنے کے لیے خصوصیت،' سب کچھ 'متبادل متن ہے جو شامل کیا جاتا ہے اگر تصویر ظاہر نہیں ہوتی ہے، اور ' چوڑائی تصویر کی چوڑائی فراہم کرنے کے لیے خصوصیت۔
ایچ ٹی ایم ایل
< div کلاس = 'مین-ڈیو' >
< div کلاس = 'img-peng' >
< img src = 'images/penguin.png' سب کچھ = 'پینگوئن' چوڑائی = '100' >
div >
div >
.main-div {
سی ایس ایس
چوڑائی: 90 % ;
اونچائی: 90px؛
پس منظر کا رنگ: rgb ( 67 ، 66 ، 87 ) ;
مارجن: 20px آٹو؛
پیڈنگ: 10px؛
}
سی ایس ایس میں، ' .main-div div کلاس تک رسائی کے لیے شامل کیا جاتا ہے۔ اس پر لاگو خصوصیات ذیل میں بیان کی گئی ہیں:-
- ' چوڑائی پراپرٹی ویلیو div کی چوڑائی کی وضاحت کرتی ہے۔
- ' اونچائی 'پراپرٹی کا استعمال div کی اونچائی کو سیٹ کرنے کے لیے کیا جاتا ہے۔
- ' پس منظر کا رنگ ' پراپرٹی عنصر کے پس منظر پر رنگ کا اطلاق کرتی ہے۔
- ' مارجن 'کے طور پر مقرر کیا گیا ہے' 20px کار ”، جو اوپر اور نیچے سے جگہ کی نشاندہی کرتا ہے، اور آٹو کا مطلب ہے بائیں اور دائیں سے برابر جگہ۔
- ' بھرتی پراپرٹی ویلیو 10px کے طور پر تفویض کی گئی ہے، جو عنصر کے مواد کے ارد گرد جگہ کا اطلاق کرتی ہے۔
اسٹائل img-peng کلاس
.img-peng {
چوڑائی: 50px؛
اونچائی: 100px؛
پوزیشن: رشتہ دار
animation: shake;
حرکت پذیری کا دورانیہ: 2 سیکنڈ؛
animation-time-function: 2s;
animation-iteration-count: لامحدود؛
}
' .img-peng ” کا استعمال div کلاس تک رسائی کے لیے کیا جاتا ہے، جس کا اوپر HTML فائل میں ذکر کیا گیا ہے۔ یہ div عنصر ذیل میں زیر بحث خصوصیات کے ساتھ اسٹائل کیا گیا ہے:-
- ' چوڑائی عنصر کی چوڑائی کو سیٹ کرنے کے لیے پراپرٹی ویلیو کا استعمال کیا جاتا ہے۔
- ' اونچائی عنصر کی اونچائی کو متعین کرنے کے لیے پراپرٹی ویلیو کا استعمال کیا جاتا ہے۔
- ' پوزیشن 'پراپرٹی کو قیمت تفویض کی گئی ہے' رشتہ دار ”، جس کا مطلب ہے کہ اسے اس کی عام پوزیشن کے مقابلے میں رکھا جائے گا۔
- ' حرکت پذیری 'نام دیا گیا ہے' ہلانا ' تاہم، آپ ضرورت کے مطابق اینیمیشن کا نام دے سکتے ہیں۔
- ' حرکت پذیری کا دورانیہ ” حرکت پذیری کی مدت کی نمائندگی کرتا ہے، جو کہ 2 سیکنڈ ہے۔
- ' اینیمیشن ٹائمنگ فنکشن ” کو 2s کی قدر تفویض کی گئی ہے جس کا مطلب ہے کہ 2 سیکنڈ میں اینیمیشن مکمل ہو جاتی ہے۔
- ' حرکت پذیری- تکرار- شمار ” کو لامحدود کے طور پر سیٹ کیا گیا ہے، جس کا مطلب ہے کہ یہ اینیمیشن لامحدود وقت میں ہو گی۔
مطلوبہ الفاظ کے ساتھ اور اس سے @keyframes کی وضاحت کریں۔
@ کلیدی فریم ہلاتے ہیں۔ {
سے {
اوپر: 50px؛
}
کو {
مارجن نیچے: 200px؛
}
}
تصویر پر سیٹ کیے گئے اینیمیشن کی فریمز کی تفصیل ذیل میں درج ہے:-
- ' @keyframes ہلاتے ہیں۔ ” سے مراد اینیمیشن کا نام شیک ہے جس کے بعد کی ورڈ @keyframes آتا ہے۔ اس اصول کے اندر، حرکت پذیری کے رویے کی وضاحت کی گئی ہے۔
- اس کے گھوبگھرالی بریکٹ کے اندر، ' سے 'اور' کو ” مطلوبہ الفاظ حرکت پذیری کے رویے کی وضاحت کے لیے مختلف وقفوں کی وضاحت کرتے ہیں۔
- ' سب سے اوپر ” پراپرٹی کو 50px کی قدر تفویض کی گئی ہے، جس کا مطلب ہے کہ اینیمیشن اسکرین کے اوپری حصے سے 50px سے شروع ہوتی ہے اور نیچے 200px تک جاری رہتی ہے۔
نتیجے کے طور پر، آپ کو مندرجہ ذیل آؤٹ پٹ نظر آئے گا:
اب، حرکت پذیری کو مختلف وقفوں پر مختلف طریقے سے برتاؤ کرنے دیں۔ ایسا کرنے کے لیے، @keyframes میں اینیمیشن فیصد کا استعمال کریں۔فیصد کے ساتھ @keyframes کی وضاحت کریں۔
@ کلیدی فریم ہلاتے ہیں۔ {
0 % {
بائیں: -50px ;
}
25 % {
بائیں: 50px؛
}
پچاس % {
بائیں: -25px ;
}
75 % {
بائیں: 25px؛
}
100 % {
بائیں: 10px؛
}
}
لہذا، مندرجہ بالا کوڈ کے ٹکڑوں کی تفصیل یہاں ذکر کی گئی ہے:-
- فیصد کی قدریں 0%، 25%، 50%، 75%، اور 100% مختلف وقفوں پر اینیمیشن کی نمائندگی کرتی ہیں۔
- مزید یہ کہ، 0% پر، تصویر کے بائیں جانب کی جگہ ' -50px ' 25% پر، بائیں طرف کی جگہ ہوگی ' 50px ' 50% پر، بائیں طرف کی جگہ ہوگی ' -25px ' 75% پر، بائیں جگہ ہوگی ' 25px '، اور جب حرکت پذیری مکمل ہو جائے گی (100%)، بائیں جگہ ہو جائے گی ' 10px '
مندرجہ بالا کوڈ درج ذیل اینیمیشن دکھاتا ہے:
آئیے یہ دیکھنے کے لیے ایک اور مثال لیتے ہیں کہ ہم تصاویر پر اینیمیشن کیسے سیٹ کر سکتے ہیں۔مثال 2
ایچ ٹی ایم ایل میں، کلاس کا نام رکھنے والا ایک
شامل کریں۔ سرورق ' اسعنصر کے اندر، کلاسز کے ساتھ دو مزید div ٹیگ لگائیں بادل 1 'اور' بادل2 '، بالترتیب.ایچ ٹی ایم ایل
< div کلاس = 'سرورق' >
< div کلاس = 'بادل 1' >> div >
< div کلاس = 'بادل 2' >> div >
div >
جسم {
سی ایس ایس
مارجن: 0 ;
بھرتی: 0 ;
}
CSS میں، ہم جسم کے عنصر کو درج ذیل CSS خصوصیات تفویض کریں گے:-
- ' مارجن 0 بطور خاصیت عنصر کے ارد گرد کوئی جگہ نہیں بتاتی ہے۔
- ' بھرتی ' قدر 0 والی پراپرٹی عنصر کے مواد کے ارد گرد کوئی جگہ نہیں بتاتی ہے۔
اسٹائل مین پیج ڈیوی
.سرورق {
پس منظر کی تصویر: یو آر ایل ( / تصاویر / wolf-night.png ) ;
background-repeat: no-repeat؛
پس منظر کا سائز: کور
اونچائی: 100vh؛
پوزیشن: رشتہ دار
چھپا ہوا رساو؛
}
یہاں:-
- ' .سرورق div کلاس تک رسائی کے لیے استعمال کیا جاتا ہے۔
- ' پس منظر کی تصویر 'پراپرٹی کو قیمت تفویض کی گئی ہے' url(/images/wolf-night.png) جہاں امیجز وہ فولڈر ہے جس میں تصویر wolf-night.png ہے۔
- ' پس منظر دوبارہ 'پراپرٹی کو قیمت تفویض کی گئی ہے' دوبارہ نہیں ، جس کا مطلب ہے کہ تصویر ایک بار دکھائی جائے گی۔
- ' پس منظر کا سائز 'ایک کے طور پر مقرر کیا گیا ہے' احاطہ پورے div عنصر کو بھرنے کے لیے۔
- ' اونچائی ” 100vh ہے جو کہ ویو پورٹ کی اونچائی کا 100% ہے۔
- ' پوزیشن ' جیسا کہ رشتہ دار تصویر کی پوزیشن کو اس کے موجودہ مقام کے نسبت سیٹ کرتا ہے۔
- ' بہاؤ امیج کی قدر کو تصویر کے اس حصے کو چھپانے کے لیے مخفی کے طور پر سیٹ کیا گیا ہے جو کنٹینر میں فٹ ہونے کے لیے بہت بڑا ہے۔
اسٹائل کلاؤڈ 1 کلاس
.Cloud1 {
پس منظر کی تصویر: یو آر ایل ( / تصاویر / cloud.png ) ;
پس منظر کا سائز: مشتمل؛
background-repeat: no-repeat؛
پوزیشن: مطلق؛
اوپر: 100px؛
چوڑائی: 500px؛
اونچائی: 300px؛
animation: cloudanimation1;
حرکت پذیری کا دورانیہ: 70s؛
animation-iteration-count: لامحدود؛
}
Div کلاس کلاؤڈ 1 کا اطلاق درج ذیل وضاحت شدہ خصوصیات کے ساتھ کیا جاتا ہے۔-
- ' .Cloud1 div class cloud1 تک رسائی کے لیے استعمال کیا جاتا ہے۔
- ' پس منظر کی تصویر ” پراپرٹی کو url(/images/cloud.png) کے بطور سیٹ کیا گیا ہے، جہاں امیجز وہ فولڈر ہیں جس میں امیج cloud.png ہوتا ہے۔
- ' پس منظر کا سائز 'قیمت کے ساتھ' پر مشتمل ” تصویر کی مرئیت کو یقینی بناتا ہے۔
- ' پس منظر دوبارہ 'جائیداد جس کی قدر مقرر کی گئی ہے' دوبارہ نہیں ” تصویر کو غیر دہرائے جانے والے کے طور پر دکھاتا ہے۔
- ' پوزیشن ' بطور مطلق پوزیشن تصویر کو اس کے والدین کے عنصر سے نسبت دیتا ہے۔
- ' سب سے اوپر پراپرٹی تصویر کو اوپر سے 100px پر سیٹ کرتی ہے۔
- ' چوڑائی ” پراپرٹی کا استعمال div عنصر کی چوڑائی کو 500px کرنے کے لیے کیا جاتا ہے۔
- ' اونچائی ” پراپرٹی کا استعمال div عنصر کی اونچائی کو 300px کرنے کے لیے کیا جاتا ہے۔
- ' حرکت پذیری ' کو کلاؤڈ اینیمیشن 1 کا نام دیا گیا ہے۔
- ' حرکت پذیری کا دورانیہ ” حرکت پذیری کی مدت کی نمائندگی کرتا ہے، جو کہ 70 سیکنڈ ہے۔
- ' حرکت پذیری- تکرار- شمار ” کی قدر لامحدود تفویض کی گئی ہے، جو اینیمیشن کو لامحدود بار دہرائے گی۔
اب تک، ہم نے سی ایس ایس کی خصوصیات کو div کلاس مین پیج اور کلاؤڈ 1 پر لاگو کیا ہے۔ اب، اگلے حصے میں، ہم کلاؤڈ 2 کے نام سے اگلی div کلاس کو اسٹائل کریں گے۔
اسٹائل کلاؤڈ 2 کلاس
.Cloud2 {
پس منظر کی تصویر: یو آر ایل ( / تصاویر / cloud.png ) ;
پس منظر کا سائز: مشتمل؛
background-repeat: no-repeat؛
پوزیشن: مطلق؛
اوپر: 50px؛
چوڑائی: 200px؛
اونچائی: 300px؛
animation: cloudanimation2;
حرکت پذیری کا دورانیہ: 15 سیکنڈ؛
animation-iteration-count: لامحدود؛
}
div class cloud2 کا اطلاق ان خصوصیات کے ساتھ کیا جاتا ہے جن کی وضاحت ذیل میں کی گئی ہے۔-
- ' .Cloud2 کلاس کلاؤڈ 2 تک رسائی کے لیے استعمال کیا جاتا ہے۔
- ' پس منظر کی تصویر پراپرٹی url(/images/cloud.png) کے طور پر سیٹ کی گئی ہے، جہاں تصویر ایک فولڈر ہے جس میں image cloud.png شامل ہے۔
- ' پس منظر کا سائز ” ایک قدر پر مشتمل ہے جو تصویر کی مرئیت کو یقینی بناتی ہے۔
- ' پس منظر دوبارہ ' no-repeat کے بطور سیٹ ویلیو والی پراپرٹی تصویر کو نان ریپیٹ کے طور پر دکھاتی ہے۔
- ' پوزیشن ” بطور مطلق پوزیشن تصویر کو اس کے والدین کے عنصر سے نسبت دیتا ہے۔
- ' سب سے اوپر پراپرٹی تصویر کو اوپر سے 100px پر سیٹ کرتی ہے۔
- ' چوڑائی ” پراپرٹی کو div عنصر کی چوڑائی سیٹ کرنے کے لیے استعمال کیا جاتا ہے۔
- ' اونچائی ” پراپرٹی کا استعمال div عنصر کی اونچائی کو متعین کرنے کے لیے کیا جاتا ہے۔
- ' حرکت پذیری ' کو کلاؤڈ اینیمیشن 2 کا نام دیا گیا ہے۔
- ' حرکت پذیری کا دورانیہ ” حرکت پذیری کی مدت کی نمائندگی کرتا ہے۔
- ' حرکت پذیری- تکرار- شمار ” کی قدر لامحدود تفویض کی گئی ہے، جو اینیمیشن کو لامحدود بار دہرائے گی۔
کلاؤڈ اینیمیشن1 کے لیے @keyframes کی وضاحت کریں۔
@ کلید فریم کلاؤڈ اینیمیشن 1 {
کو {
بائیں: 0px؛
}
سے {
بائیں: 100 % ;
}
}
کلاؤڈ 1 ڈیو حرکت پذیری کے ساتھ پابند ہے جو ذیل میں بیان کیا گیا ہے:-
- ' @keyframes cloudanimation1 ” animation cloudanimation1 کے نام کے بعد مطلوبہ لفظ @keyframes آتا ہے جو منتقلی کی وضاحت کے لیے استعمال ہوتا ہے۔
- @keyframes کلیدی لفظ یہ بتاتا ہے کہ کلاؤڈ امیجز پر شروع سے آخر تک اینیمیشن کیسے کی جاتی ہے۔
- ' کو 'اور' سے ” کلیدی الفاظ بتاتے ہیں کہ کلاؤڈ 1 100% سے اسکرین کے 0px پر چلے گا۔
کلاؤڈ اینیمیشن2 کے لیے @keyframes کی وضاحت کریں۔
@ کی فریمز کلاؤڈ اینیمیشن 2 {
0 % {
بائیں: 0 % ;
}
100 % {
بائیں: 100 % ;
}
}
div class cloud2 اس اینیمیشن سے وابستہ ہے جس کی وضاحت ذیل میں کی گئی ہے۔-
- ' @keyframes cloudanimation2 ” اینیمیشن کے نام کی نمائندگی کرتا ہے cloudanimation2 اس کے بعد مطلوبہ لفظ @keyframes جو اینیمیشن کی وضاحت کے لیے استعمال ہوتا ہے۔
- ' 0% 'اور' 100% ” حرکت پذیری کے آغاز اور اختتام کی نمائندگی کرتا ہے۔
- اینیمیشن کے 0% پر، کلاؤڈ بائیں طرف ہو گا جس کی قدر 0% سیٹ ہو گی، اور یہ آہستہ آہستہ چوڑائی کے 100% تک چلا جائے گا۔
آؤٹ پٹ
اچھا ہے! ہم نے اس بات پر تبادلہ خیال کیا ہے کہ کس طرح ہم کلیدی لفظ @keyframes کو کامیابی کے ساتھ استعمال کرتے ہوئے عناصر کے لیے اینیمیشن کی وضاحت کر سکتے ہیں۔نتیجہ
CSS ہمیں HTML عناصر پر طرزیں لاگو کرنے کی اجازت دیتا ہے۔ CSS میں حرکت پذیری ایک انداز سے دوسرے انداز میں منتقلی کرتی ہے۔ یہ دو اجزاء پر مشتمل ہے، حرکت پذیری کی طرزیں، اور کلیدی فریم۔ حرکت پذیری کی طرزیں مختلف خصوصیات کی نمائندگی کرتی ہیں جیسے کہ ان کا نام، حرکت پذیری-دورانیہ، حرکت پذیری- تکرار- شمار، اور مزید۔ جبکہ کلیدی فریم جزو اینیمیشن کے آغاز اور اختتام کو متعین کرتا ہے۔ اس گائیڈ نے مثالوں کے ساتھ اینیمیشن کی فریموں کو ترتیب دینے کے طریقے کی وضاحت کی ہے۔
- کلاس نام کے ساتھ ایک