یہ مضمون فراہم کرے گا:
- طریقہ 1: سی ایس ایس اینیمیشن پراپرٹی کا استعمال کرتے ہوئے فیڈ ان ایفیکٹ
- طریقہ 2: سی ایس ایس ٹرانزیشن پراپرٹی کا استعمال کرتے ہوئے فیڈ ان ایفیکٹ
طریقہ 1: CSS 'اینیمیشن' پراپرٹی کا استعمال کرتے ہوئے فیڈ ان ایفیکٹ
ایک سادہ HTML صفحہ ڈیزائن کرنے کے لیے، اس پر درج ذیل عنصر شامل کریں:
- شامل کریں ' 'عنصر کے ساتھ' انداز ' وصف. 'اسٹائل' وصف عنصر کی اسٹائلنگ خصوصیات پر مشتمل ہے۔
- لاگو کریں ' رنگ عنصر کے متن کے رنگ کی وضاحت کرنے کے لیے اسٹائل وصف میں پراپرٹی۔
- اس کے بعد، استعمال کریں ' کچھ متن یا سادہ پیراگراف شامل کرنے کے لیے عنصر۔
ذیل میں HTML کوڈ ہے:
< h2 انداز = 'رنگ: آر جی بی (84، 8، 191)' >
لینکس ہنٹ ٹیوٹوریل ویب سائٹ
< / h2 >
< ص > صفحہ لوڈ پر دھندلا اثر < / ص >
HTML صفحہ کامیابی کے ساتھ بنایا گیا ہے:
سی ایس ایس سیکشن میں، صفحہ پر فیڈ ان اثر کو لاگو کرنے کے لیے، ' حرکت پذیری 'CSS پراپرٹی کو استعمال کیا جائے گا' HTML صفحہ کا عنصر۔
اسٹائل 'جسم' عنصر
جسم {اینیمیشن: fadeInPage ease 3s؛
حرکت پذیری- تکرار- شمار: ایک ;
}
'
' درج ذیل CSS خصوصیات کے ساتھ لاگو ہوتا ہے:- ' حرکت پذیری ” وہ شارٹ ہینڈ پراپرٹی ہے جو ایک سے زیادہ ویلیوز بتا کر اینیمیشن سیٹ کرتی ہے۔ یہاں، حرکت پذیری کا نام، اینیمیشن-ٹائمنگ-فنکشن، اور اینیمیشن-دورانیہ کی وضاحت کی گئی ہے۔
- ' حرکت پذیری- تکرار- شمار ” اس بات کی وضاحت کرتا ہے کہ اینیمیشن کو کتنی بار اعادہ کرنا چاہیے۔
'اینیمیشن' پر '@keyframes' کے قواعد کا اطلاق کریں
@keyframes fadeInPage {0 % {
دھندلاپن: 0 ;
}
100 % {
دھندلاپن: ایک ;
}
}
کی وضاحت کرنے کے لیے ' @keyframes اینیمیشن کے اصول، @keyframes کلیدی لفظ کے بعد اینیمیشن کا نام بتائیں۔ حرکت پذیری کے رویے میں اس طرح ترمیم کریں:
- پر ' 0% ' حرکت پذیری ، ' دھندلاپن ” پراپرٹی کی قدر 0 تفویض کی گئی ہے۔ اس کا مطلب ہے کہ جب حرکت پذیری شروع ہوتی ہے تو تصویر شفاف ہوتی ہے۔
- پر ' 100% ' حرکت پذیری، دھندلاپن کو سیٹ کیا گیا ہے ' ایک ”، جس سے مراد ٹھوس رنگ ہے۔
آؤٹ پٹ
آئیے صفحہ لوڈ پر فیڈ ان اثر کو لاگو کرنے کے دوسرے طریقہ کی طرف آگے بڑھتے ہیں۔
طریقہ 2: سی ایس ایس 'ٹرانزیشن' پراپرٹی کا استعمال کرتے ہوئے فیڈ ان ایفیکٹ
ایک شامل کریں ' لوڈ ہونے پر 'وصف' کے اندر ' عنصر. یہ واقعہ صفحہ لوڈ ہونے پر متحرک ہوتا ہے۔ بوجھ پر، جسم کے عنصر کی دھندلاپن کو سیٹ کیا جاتا ہے ' ایک ”، جس کا تعلق ٹھوس رنگ سے ہے:
< جسم لوڈ ہونے پر = 'document.body.style.opacity='1'' >اس مثال میں، CSS ' منتقلی ' جائیداد کو دھندلا اثر ڈالنے کے لیے استعمال کیا جاتا ہے:
جسم {دھندلاپن: 0 ;
منتقلی: دھندلاپن 6s؛
}
مندرجہ بالا خصوصیات کی وضاحت درج ذیل ہے:
- ' دھندلاپن پراپرٹی عناصر کی شفافیت کی وضاحت کرتی ہے۔
- CSS کا استعمال کرتے ہوئے ' منتقلی '، آہستہ آہستہ ایک مخصوص وقت کے ساتھ خصوصیات کی قدروں کو تبدیل کریں۔
آؤٹ پٹ
ہم نے آپ کو صفحہ لوڈ پر فیڈ ان اثر کے لیے CSS استعمال کرنے کے طریقے سکھائے ہیں۔
نتیجہ
HTML عناصر پر فیڈ ان اثر کو لاگو کرنے کے لیے متعدد CSS خصوصیات کا استعمال کیا جا سکتا ہے۔ مزید خاص طور پر، ' حرکت پذیری '،' دھندلاپن '، اور ' منتقلی خصوصیات کو صفحات یا عناصر پر متحرک اثرات کی وضاحت کے لیے استعمال کیا جا سکتا ہے۔ متحرک تصاویر کو 'کا استعمال کرکے ایڈجسٹ کیا جاتا ہے۔ @keyframe 'قواعد. اس مضمون میں سی ایس ایس کا استعمال کرتے ہوئے صفحہ کے بوجھ پر دھندلا اثر ڈالنے کے طریقوں کی وضاحت کی گئی ہے۔