انیمیٹ سی ایس کو اب کچھ ہی سال ہوچکے ہیں اور مجھے پارٹی میں دیر سے ہونے کا اعتراف کرنا چاہئے۔ میں نے کچھ مہینے پہلے ہی اسے سی ایس ایس کے کچھ حرکت پذیری سبق کے لئے نیٹ کی تلاش کرتے ہوئے دریافت کیا تھا اور معلوم کیا تھا کہ انیمیٹ سی ایس ایس کے ارد گرد متحرک کرنے کا سب سے تیز ، آسان ترین طریقہ کیا ہے۔
ڈین ایڈن نامی ایک لڑکے کے ذریعہ تیار کردہ ، انیمیٹ سی ایس ایس یہ دیکھنے کا ایک تیز رفتار طریقہ ہے کہ سی سی ایس کس طرح کام کرتا ہے اور اپنی ویب سائٹ پر کچھ حرکت پذیری کارروائی حاصل کرتا ہے۔
'جسٹ-ایڈ واٹر سی ایس ایس حرکت پذیری' کے بطور بیان کردہ انیمیٹ سی ایس ایک سنجیدہ پہلو کے ساتھ تھوڑا سا مذاق ہے۔ یہ یہاں تک کہ شوقیہ ویب ڈیزائنرز جیسے اپنے آپ کو سی ایس ایس حرکت پذیری کے بنیادی اصولوں کو تیزی سے گرفت میں لینے اور ویب سائٹوں کے لئے آسان لیکن موثر اثرات پیدا کرنے کی اجازت دیتا ہے۔ ایک ہی متحرک سرخی سے لے کر زیادہ شامل تحریکوں تک ، یہ ٹول یہ کرسکتا ہے۔
انیمیٹ سی ایس ایس
انیمیٹ سی ایس ایس گٹ ہب سے ڈاؤن لوڈ کرنے کے لئے دستیاب ہے اور بنیادی طور پر ایک ہی جگہ پر جمع کردہ سادہ سی ایس ایس اثرات کی لائبریری ہے۔ ہر ایک حرکت پذیری اچھی طرح سے پیک اور استعمال کے لئے تیار ہے۔ آپ کو صرف اپنی پسند کی حرکت پذیری تلاش کرنے اور کلاس لگانے کی ضرورت ہے۔ واقعی میں بس اتنا ہے۔
اگر آپ نہیں چاہتے ہیں تو آپ کو پوری لائبریری ڈاؤن لوڈ کرنے کی ضرورت نہیں ہے کیونکہ اس میں کوڈ کی 2،500 لائنیں موجود ہیں۔ آپ انیمیٹ سی ایس ایس سائٹ ملاحظہ کرسکتے ہیں ، حرکت پذیری تلاش کرسکتے ہیں اور ڈاؤن لوڈ انیمیٹ سی ایس ایس لنک پر کلک کرسکتے ہیں۔ یہ کلاس کو ایک ویب پیج پر لوڈ کرتی ہے تاکہ آپ کاپی کریں اور استعمال کریں جس طرح آپ کو موزوں نظر آئے گا۔
اگرچہ آپ جس تاثر کو تلاش کر رہے ہیں اسے تلاش کرنے کے لئے گٹ ہب کا استعمال کرنا اور نیچے کھینچنا آسان ہے۔
- سی ایس ایس گٹ ہب صفحے پر جائیں۔
- عناصر کی فہرست تک رسائی حاصل کرنے کے لئے ماخذ لنک پر کلک کریں۔
- فہرست سے جس اثر کی تلاش ہے اس کو منتخب کریں۔ اچھال ایک توجہ کا متلاشی ہے ، لہذا توجہ_ تلاش کرنے والوں کے لنک کو منتخب کریں۔
- باؤنس سی ایس ایس کو منتخب کریں۔
- کوڈ کو کاپی کریں اور حرکت پذیری کا اطلاق کرنے کیلئے اسے اپنے صفحے پر رکھیں۔
یہ واقعی اتنا آسان ہے۔ آپ واضح طور پر مختلف اثرات کے ل different مختلف اختیارات منتخب کریں گے لیکن حتمی نتیجہ ایک جیسا ہے۔ صفحے پر بھاری لفٹنگ کرنے کے لئے ضروری کوڈ تک رسائی۔
انیمیٹ سی ایس ایس کے ساتھ متحرک آبجیکٹ کی تشکیل
انیمیٹ سی ایس ایس کی مدد سے کسی بھی چیز کو ٹھنڈا کرنا آسان ہے۔ یہ صرف سی سی ایس کوڈ تلاش کرنے اور اسے اپنے سی ایس ایس میں شامل کرنے کی بات ہے۔ اگر میں یہ کرسکتا ہوں تو ، کوئی بھی کرسکتا ہے!
انیمیٹ سی ایس ایس پیج پر پہلا آپشن اچھال ہے ، تو آئیے ہم اس مثال میں اس کا استعمال کریں۔
- پیسٹ کریں 'اندر آپ کی اسٹائل شیٹ میں۔
- آپ جس حرکت پذیری کے لئے چاہتے ہیں اس کے لئے سی ایس ایس تلاش کریں اور جس عنصر کو متحرک کرنا چاہتے ہیں اس میں شامل کریں۔ مثال کے طور پر ، شامل کریں ' 'اس باؤنس اثر کو جانچنے کے ل add ، کسی شبیہ یا جو بھی شامل کریں۔
- یہ کام کرنے کیلئے درج ذیل CSS کوڈ شامل کریں۔ اوپر باؤنس سی ایس ایس سے لیا گیا۔
keyframes اچھال {
، 20٪ ، 53٪ ، 80٪ ، سے {
حرکت پذیری کے وقت کا فنکشن: کیوبک بییزیر (0.215، 0.610، 0.355، 1.000)؛
ٹرانسفارم: transte3d (0،0،0)؛
}
40٪ ، 43٪
حرکت پذیری کے وقت کا فنکشن: کیوبک بییزیر (0.755، 0.050، 0.855، 0.060)؛
ٹرانسفارم: transte3d (0، -30px، 0)؛
}
70٪
حرکت پذیری کے وقت کا فنکشن: کیوبک بییزیر (0.755، 0.050، 0.855، 0.060)؛
ٹرانسفارم: transte3d (0، -15px، 0)؛
}
90٪
ٹرانسفارم: transte3d (0، -4px، 0)؛
}
}
.bounce {
حرکت پذیری کا نام: اچھال؛
تبدیلی اصل: مرکز نیچے؛
}
انیمیٹ سی ایس ایس کے ساتھ مزید حرکت پذیری لے رہے ہیں
مذکورہ بالا تسلسل میں اچھال کا اثر شامل ہوتا ہے جب صفحہ پہلا بوجھ پڑتا ہے ، جو ڈاؤن لوڈ ، اتارنا لیکن ایک وقت کی چیز ہے۔ ہم اسے کس طرح ہور کرنے میں شامل کرتے ہیں۔ اس طرح ، جب بھی کوئی امتحان پر گھومتا ہے تو اچھال پڑتا ہے۔ یہ ایسی چیز نہیں ہے جو میں پروڈکشن کی ویب سائٹ پر کروں گا ، لیکن یہ ظاہر کرنے کا ایک بہت اچھا طریقہ ہے کہ سب کچھ کیسے کام کرتا ہے۔
ہوور اثر پر اچھال کو شامل کرنے کیلئے درج ذیل کوڈ کو اپنے سی ایس ایس میں شامل کریں۔ ، جب بھی عنصر پر ماؤس گھومتا ہے ، اچھالنا چاہئے۔
.animated: ہوور {
-ویبکیٹ - حرکت پذیری کی مدت: 1s؛
-موز-حرکت پذیری کا دورانیہ: 1s؛
-ایس ایمیشن-دورانیہ: 1s؛
-و-حرکت پذیری کی مدت: 1s؛
حرکت پذیری کی مدت: 1s؛
-ویبکیٹ - حرکت پذیری - موڈ: دونوں؛
-موز-حرکت پذیری-فل موڈ: دونوں؛
-ایس ایمیزیشن-فل-موڈ: دونوں؛
-و-حرکت پذیری-فل-موڈ: دونوں؛
حرکت پذیری بھریں: دونوں؛
}
اگر آپ سی ایس ایس کو جانتے ہیں تو ، آپ مجھ سے بہت بہتر جانتے ہوں گے کہ مختلف افعال کے مختلف اثرات کو کس طرح نافذ کرنا ہے۔ ابتدائی طور پر ، یہ اور انیمیٹ سی ایس ایس میں فراہم کردہ لائبریریوں سے میرے ویب صفحات کے لئے بنیادی ، لیکن موثر متحرک تصاویر تخلیق کرنے میں مدد ملتی ہے۔
مجھے نہیں معلوم کہ میں زندہ ویب سائٹ پر کتنے استعمال کروں گا کیوں کہ وہ ہمیشہ بہت اچھ .ے نہیں ہوتے ہیں اور موبائل صارفین ان کو زیادہ پسند نہیں کرتے ہیں۔ تاہم ، اس امر کے سبق کے طور پر کہ سی ایس ایس کس طرح کام کرتا ہے اور ویب کو بڑھاوا دینے کے ل how اسے کس طرح استعمال کیا جاسکتا ہے ، یہ ایک بہت بڑا وسیلہ ہے۔ میں صرف ایک ابتدائی ہوں لیکن یہاں تک کہ اس ٹیوٹوریل کے لئے انیمیٹ سی ایس ایس کے ساتھ کئی گھنٹے گزارا ہوں ، اس نے مجھے بہت کچھ سکھایا ہے۔ مجھے لگتا ہے کہ میں اپنے کام کرنے سے پہلے اس کے ساتھ اور بھی کھیلوں گا۔ تم کیسے ھو؟
