یہ مضمون ایک ہی وقت میں ایک سے زیادہ CSS اینیمیشنز چلانے/ شامل کرنے کا عملی مظاہرہ پیش کرتا ہے۔
ایک ہی وقت میں ایک سے زیادہ CSS اینیمیشن کیسے چلائیں؟
ایک ہی وقت میں متعدد سی ایس ایس اینیمیشنز کو لاگو کرنے سے، ڈویلپر آسانی سے زیادہ پرکشش انٹرفیس بنا سکتے ہیں۔ ایک ہی وقت میں بہت سی سی ایس ایس اینیمیشن چلانے کے لیے، ہر ایک کو ایک منفرد نام دیں اور ان ناموں کو صفحہ پر ایک ہی یا الگ الگ اجزاء پر لاگو کریں۔
ایک ہی وقت میں ایک سے زیادہ اینیمیشن چلانے/شامل کرنے کے لیے درج ذیل طریقہ کار پر عمل کریں۔
مرحلہ 1: ساخت کی تخلیق
سب سے پہلے، ایک HTML عنصر بنائیں جس میں اینیمیشنز آنے والے مراحل میں لاگو ہوں۔ مثال کے طور پر، تصویر داخل کی جائے گی:
< div کلاس = 'اسپین' >
< img src = 'book.jpg' اونچائی = '100px' چوڑائی = '100px' کلاس = 'جاندار' >
< / div >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، تصویر کا راستہ ' src ' وصف.
- اگلا، 'کی قدر 100px 'CSS 'چوڑائی' اور 'اونچائی' خصوصیات کو فراہم کیا جاتا ہے۔
- اس کے علاوہ، 'کی قدر مقرر کریں متحرک ' کرنے کے لئے ' کلاس ' وصف.
مرحلہ 2: متحرک تصاویر ترتیب دیں۔
' کی فریمز ویب پیج کی ضرورت کے مطابق کسٹم اینیمیشن بنانے کے لیے استعمال کیا جاتا ہے۔ مثال کے طور پر، ذیل میں کوڈ کے ٹکڑوں میں دو اینیمیشنز بنائے گئے ہیں۔
@-webkit-keyframes اسپن {100 % {
transform : گھماؤ ( 180 ڈگری ) ;
}
}
@-webkit-keyframes اسکیل {
100 % {
transform: سکیل ایکس ( 1 ) پیمانے Y ( 1 ) ;
}
}
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، ' @-webkit-keyframes 'قائم کرنے کے لیے میکانزم کا استعمال کیا جا رہا ہے' گھماؤ 'اور' گھمائیں 'نام کی متحرک تصاویر۔
- اگلا، استعمال کریں ' تبدیل 'جائیداد جس کی قیمت ہے' گھمائیں() ' میں ' گھماؤ ' حرکت پذیری کا جسم۔ یہ فنکشن عنصر کو ' کے زاویہ پر گھماتا ہے 180 ڈگری '
- اس کے بعد، حرکت پذیری کو سیٹ کریں جو اصل عنصر کو 'کے عنصر سے بڑھا یا بڑھاتا ہے 1 'دونوں میں' ایکس 'اور' اور ' محور میں ' پیمانہ ' حرکت پذیری کا جسم۔
مرحلہ 3: ایچ ٹی ایم ایل عناصر پر اینیمیشن کا اطلاق کرنا
CSS حصے کے اندر، کلاس کو منتخب کریں ' متحرک 'جو تفویض کیا گیا ہے' ٹیگ کریں، اور درج ذیل سی ایس ایس خصوصیات فراہم کریں:
پوزیشن: مطلق؛
بائیں: 60 %;
چوڑائی : 110px;
اونچائی : 110px;
مارجن: -40px 0 0 -40px;
ویب کٹ حرکت پذیری: اسکیل 3s لامحدود لکیری؛
ویب کٹ اینیمیشن: اسپن 2s لامحدود لکیری؛
}
مندرجہ بالا کوڈ بلاک میں استعمال ہونے والی خصوصیات کی تفصیل:
- سب سے پہلے، 'کی قدر مقرر کریں مطلق 'سی ایس ایس کو' پوزیشن ' جائیداد. یہ ترتیب دیتا ہے ' img حرکت پذیری کے مطابق عنصر۔
- پھر، 'کی اقدار فراہم کریں 60% '،' 110px 'اور' 110px 'سی ایس ایس کو' بائیں '،' چوڑائی 'اور' اونچائی خصوصیات ان خصوصیات کو کسی عنصر کی پوزیشن اور سائز مقرر کرنے کے لیے استعمال کیا جاتا ہے۔
- اس کے بعد، 'کی قدر مقرر کریں اسکیل 3s لامحدود لکیری ' کرنے کے لئے ' -ویب کٹ-اینیمیشن سی ایس ایس پراپرٹی۔
- اور ' 3s 'اس حرکت پذیری کی مدت ہے،' لامحدود ' حرکت پذیری کی مدت ہے، اور ' لکیری ” حرکت پذیری کی سمت ہے۔
- آخر میں، 'کی اقدار فراہم کریں اسپن 2s لامحدود لکیری 'سی ایس ایس کو' -ویب کٹ-اینیمیشن ' جائیداد. یہ پراپرٹی دوسری اینیمیشن کا اضافہ کرتی ہے جس کا نام ہے “ گھماؤ ' پر ' img ' عنصر.
مندرجہ بالا کوڈ بلاک کی تالیف کے بعد، حرکت پذیری اس طرح نظر آتی ہے:
مذکورہ GIF واضح کرتا ہے کہ صرف ' گھماؤ حرکت پذیری ہدف والے عنصر پر چل رہی ہے۔
مرحلہ 4: HTML عناصر پر ایک سے زیادہ متحرک تصاویر چلانا
جیسا کہ اوپر کے مرحلے میں، عنصر پر صرف ایک اینیمیشن کا اطلاق کیا گیا ہے۔ اس کی وجہ یہ ہے کہ ایک ہی کو متعدد اقدار تفویض کی گئی ہیں۔ -ویب کٹ-اینیمیشن ' جائیداد.
اس مسئلے کو حل کرنے کے لیے، ہدف کے عنصر کو دوسرے HTML عنصر کے ساتھ لپیٹیں۔ جیسا کہ ' div 'پہلے ہی مرحلے میں ایک ریپر کے طور پر استعمال کیا جاتا ہے، اس کا انتخاب کریں' مدت اور کوڈ کو اپ ڈیٹ کریں جیسے:
متحرک {پوزیشن: مطلق؛
بائیں: 60 %;
چوڑائی : 110px;
اونچائی : 110px;
مارجن: -40px 0 0 -40px;
ویب کٹ حرکت پذیری: اسکیل 3s لامحدود لکیری؛
}
. مدت {
پوزیشن: رشتہ دار
اوپر: 160px؛
-ویب کٹ-اینیمیشن: اسپن 2s لامحدود لکیری؛
}
مندرجہ بالا کوڈ میں:
- سب سے پہلے، ' متحرک 'کلاس وہی رہتی ہے اور اس میں سے صرف دوسری اینیمیشن ہٹا دی جاتی ہے جو ' مدت 'کلاس.
- اس کے بعد، 'کا استعمال کرتے ہوئے پوزیشن مقرر کریں پوزیشن 'اور' سب سے اوپر خصوصیات
مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، ویب صفحہ اب اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ سے پتہ چلتا ہے کہ دونوں اینیمیشنز کو ایک ہی وقت میں منتخب HTML عنصر پر لاگو کیا گیا ہے۔
نتیجہ
متعدد CSS خصوصیات کو لاگو کرنے کے لیے، عنصر کو HTML عناصر کے ساتھ لپیٹیں اور ان پر اینیمیشن لگائیں تاکہ ہر HTML عنصر میں ایک اینیمیشن ہو۔ چونکہ چائلڈ پراپرٹی کو وراثت میں اینیمیشن ملتی ہے جو پیرنٹ HTML عنصر پر لاگو ہوتی ہے متعدد اینیمیشنز کمپائلر کے لیے غلطیاں یا ابہام پیدا کیے بغیر لاگو ہوجاتی ہیں۔ یہ ایک ہی وقت میں ایک سے زیادہ CSS اینیمیشن چلانے/شامل کرنے کا طریقہ ہے۔