سی ایس ایس ٹرانزیشن کو کیسے نافذ کریں: متحرک تصاویر ٹھیک ہو گئیں

کسی ویب صفحے میں متحرک تصاویر زیادہ صارفین کو راغب کرسکتی ہیں۔ اپنے آپ سے یہ پوچھیں - اگر آپ کو ایسا ویب صفحہ دیکھنا ہوتا جس میں کافی حد تک حرکت پذیری ہوتی ہو تو کیا آپ مزید تلاش نہیں کرنا چاہتے؟ اب ، سی ایس ایس ٹرانزیشن کے ساتھ آپ کچھ عمدہ متحرک تصاویر کے ساتھ اپنے کام کو زندہ بنا سکتے ہیں۔ اور ، آپ کو ذہن میں رکھنا ، یہ ٹھیک کرنے کی ضرورت ہے۔ آئیے سی ایس ایس ٹرانزیشن کی دنیا کو مندرجہ ذیل ترتیب میں تلاش کریں۔

• سی ایس ایس ٹرانزیشن کیوں؟
• منتقلی پراپرٹی
• آپ کو کس چیز کی وضاحت کرنے کی ضرورت ہے؟
• ٹرانزیشن ٹائمنگ فنکشن فنکشن پراپرٹی
• منتقلی تاخیر سے متعلق پراپرٹی

سی ایس ایس ٹرانزیشن کیوں؟

آئیے ایک مثال پیش کرتے ہیں۔ اگر آپ کسی عنصر کا رنگ سفید سے نیلے رنگ میں تبدیل کرنا چاہتے ہیں تو ، یہ تبدیلی قریب قریب ہی ہے۔ مزید متحرک اثر کے ل you ، آپ یہ تبدیلی آہستہ آہستہ کر سکتے ہیں۔ یہ بھی ضعف طور پر اپیل لگتا ہے۔ سی ایس ایس ٹرانزیشن کو چالو کرکے ، آپ جس طرح کی تبدیلیاں رونما ہوتے ہیں اسے اپنی مرضی کے مطابق بنا سکتے ہیں۔ آپ وضاحت کرسکتے ہیں کہ عناصر میں تبدیلیاں کس طرح مخصوص وقفوں پر واقع ہوتی ہیں جو ایکسلریشن وکر کی پیروی کرتی ہیں۔

سی ایس ایس ٹرانزیشن آپ کو تبدیلیوں کی وضاحت کرنے دیتی ہے عناصر ، مخصوص وقفہ ، ایکسلریشن وکر کی رفتار اور بہت کچھ۔ آپ یہ سب کچھ فلیش یا استعمال کیے بغیر کرسکتے ہیں جاوا اسکرپٹ .

بہتر تفہیم کے ل you ، آپ نیچے دی گئی تصویر کا حوالہ دے سکتے ہیں۔

مذکورہ تصویر میں ، HTML عنصر ایک سیکنڈ کے معاملے میں سرخ سے نیلے رنگ میں بدل جائے گا۔ منتقلی ہونے پر آپ کو درمیانہ رنگ بھی نظر آئے گا۔ اگر آپ سی ایس ایس ٹرانزیشن کو استعمال نہیں کررہے ہیں تو ، آپ دیکھیں گے کہ سرخ سے نیلے رنگ میں رنگ میں تبدیلی فوری ہے۔ آپ کو انٹرمیڈیٹ کا رنگ نظر نہیں آئے گا۔ سی ایس ایس ٹرانزیشن کے ساتھ ، آپ کو ایک متحرک اثر نظر آئے گا جب HTML عنصر پرانی حالت سے نئی میں تبدیل ہو رہے ہیں۔

منتقلی پراپرٹی

آپ سی ایس ایس ٹرانزیشن کو کنٹرول کرنے کے لئے شارٹ ہینڈ ٹرانزیشن پراپرٹی کا استعمال کرسکتے ہیں۔ اس شارٹ ہینڈ کا استعمال نہ صرف آسان ہے ، بلکہ یہ باہر کے ہم آہنگی والے پیرامیٹرز سے بھی بچ سکتا ہے جو سی ایس ایس میں ڈیبگ کرنے میں کافی مایوس کن ہوسکتے ہیں۔

منتقلی کی ملکیت سی ایس ایس کی خصوصیات کو واضح کرتی ہے جس پر آپ منتقلی کا اثر چاہتے ہیں۔ صرف یہ سی ایس ایس پراپرٹیز متحرک ہیں۔

نحو:

منتقلی:

ابتدائی طور پر ، آپ کو شارٹ ہینڈ کے استعمال میں کچھ مشکلات کا سامنا کرنا پڑ سکتا ہے۔ اگر آپ کو لگتا ہے کہ شارٹ ہینڈ کا استعمال آپ کے لئے ابھی تھوڑا سا پیچیدہ ہے تو ، آپ منتقلی کی خصوصیات کو الگ سے مختص کرسکتے ہیں۔ ایچ ٹی ایم ایل عنصر کے ل you ، آپ عبوری خصوصیات کو ایک ایک کرکے مخصوص کرسکتے ہیں جیسا کہ ذیل کی مثال میں دکھایا گیا ہے:

Div {چوڑائی: 100 px اونچائی: 100px پس منظر: لائٹ بلائو منتقلی - پراپرٹی: چوڑائی منتقلی کی مدت: 2s منتقلی کے وقت کی تقریب: لکیری منتقلی تاخیر: 1s} div: ہوور {چوڑائی: 300 px}
باکس پر ہوور
 

مذکورہ بالا مثال میں ، ہم نے خصوصیات (منتقلی - املاک ، منتقلی کی مدت ، منتقلی کے وقت کی تقریب اور منتقلی کی تاخیر) اور ان کی اقدار کو الگ الگ بیان کیا ہے۔ ہم جلد ہی ان منتقلی خصوصیات کے بارے میں جان لیں گے۔

آپ کو کس چیز کی وضاحت کرنے کی ضرورت ہے؟

بنیادی طور پر دو چیزیں ہیں جن کی آپ کو سی ایس ایس ٹرانزیشن بنانے کے ل need بتانے کی ضرورت ہے: سی ایس ایس پراپرٹی جو اپنا اثر شامل کرنا چاہتی ہے ، اور اس اثر کا وقت۔آپ کو ایک چیز کو ذہن میں رکھنے کی ضرورت ہے - جب آپ وقت کی مدت کی وضاحت نہیں کرتے ہیں تو ، منتقلی کی قیمت پہلے سے طے ہوجائے گی 0 ، اور کوئی اثر نہیں پڑے گا۔

آئیے ایک مثال پر غور کریں:

ذیل میں کوڈ چوڑائی پراپرٹی کا ایک منتقلی اثر پانچ سیکنڈ کی مدت کے لئے بیان کرتا ہے۔

div {چوڑائی: 100px اونچائی: 100px پس منظر: نیلے رنگ کی منتقلی: چوڑائی 5s} div: ہوور {چوڑائی: 600px}
منتقلی کا اثر دیکھنے کے ل the ، کرسر کو اوپر والے عنصر کے اوپر منتقل کریں۔
 

مذکورہ کوڈ میں ، آپ دیکھیں گے کہ جب آپ اپنے کرسر کو نیلے رنگ کے خانے پر باندھتے ہیں تو ، نیلے رنگ کے خانے میں اس کی چوڑائی آہستہ آہستہ پانچ سیکنڈ تک بڑھ جاتی ہے۔ آپ یہ بھی دیکھیں گے کہ جب آپ نیلے رنگ کے خانے سے کرسر کو ہٹاتے ہیں تو ، نیلے رنگ کے خانے آہستہ آہستہ (فوری طور پر نہیں) اپنے اصل سائز میں واپس آجائیں گے۔ آپ یہ جاننے کے ل width کہ چوڑائی اور وقت کی مدت کے لئے اقدار کو بھی تبدیل کرسکتے ہیں تاکہ یہ منتقلی پراپرٹی HTML عنصر کو کیسے متاثر کرتی ہے۔

آپ ایک سے زیادہ پراپرٹی میں منتقلی کا اثر بھی شامل کرسکتے ہیں۔ آپ خصوصیات کو الگ کرنے کے لئے کوما کا استعمال کرکے ایسا کرسکتے ہیں۔ آئیے ایک مثال پر غور کریں:

نیچے دیے گئے کوڈ میں ، منتقلی کی خاصیت چوڑائی ، اونچائی اور تبدیلی کے ل specified بیان کی گئی ہے۔

Div {بھرتی: 15px چوڑائی: 150 px اونچائی: 100 px پس منظر: سبز منتقلی: چوڑائی 2s ، اونچائی 2s ، 2s تبدیل} div: ہوور {چوڑائی: 300 px اونچائی: 200px ٹرانسفارم: گھمائیں (360deg)} ہیلو ورلڈ 
(مجھ پر ہوور)
 

مذکورہ بالا مثال کے ساتھ ، آپ دیکھیں گے کہ جب آپ باکس پر گھومتے ہیں تو گرین باکس کیسے حرکت کرتا ہے۔

ہم نے صرف پراپرٹی اور وقت کی مدت بتائی ہے۔ آئیے دوسرے پیرامیٹرز کو مختلف مثالوں کے ساتھ دیکھیں۔

ٹرانزیشن ٹائمنگ فنکشن فنکشن پراپرٹی

یہ خاصیت منتقلی کے اثر کے ل speed رفتار وکر کی وضاحت کرتی ہے۔ یہ درج ذیل اقدار لے سکتی ہے۔

• آسانی قیمت: یہ پہلے سے طے شدہ قدر ہے جہاں ابتداء میں اثر آہستہ ہوتا ہے ، پھر تیز اور آہستہ آہستہ ختم ہوتا ہے۔
• لکیری قیمت: اس اثر سے منتقلی کی رفتار مختلف نہیں ہوتی ہے - یہ شروع سے آخر تک رفتار کو مستقل رکھتا ہے۔
• آسانی میں قیمت: یہ اثر آہستہ آہستہ شروع ہوتا ہے۔
• آسانی سے قیمت: اس اثر کا ایک سست خاتمہ ہے۔
• آسانی سے باہر کی قیمت: اس اثر کا آغاز ایک سست آغاز کے ساتھ ساتھ سست اختتام پر بھی ہے۔
• مکعب-بیزیئر ویلیو (این ، این ، این ، این): آپ کیوبک بیزیر فنکشن میں اپنی قدروں کا اپنا سیٹ سیٹ کرسکتے ہیں۔

نیچے دیے گئے کوڈ میں لکیری ، آسانی ، آسانی ، آسانی اور آسانی سے باہر کی اقدار کے منتقلی کے اثرات دکھائے گئے ہیں۔

div {چوڑائی: 100px اونچائی: 100px پس منظر: گلابی منتقلی: چوڑائی 2s} # div1 {منتقلی کے وقت کی تقریب: لکیری} # div2 {منتقلی کے وقت کی تقریب: آسانی سے} # div3 {منتقلی کے وقت کی تقریب: آسانی میں div # div4 {منتقلی کے وقت کی تقریب: آسانی سے باہر} # div5 {منتقلی کے وقت کی تقریب: آسانی سے باہر in تقسیم: ہوور {چوڑائی: 300px}
نیچے دیوی عناصر پر ہوور کریں
لکیری 
آسانی 
آسانی 
آسانی سے باہر 
آسانی سے باہر 
 

منتقلی تاخیر سے متعلق پراپرٹی

کبھی کبھی ، آپ چاہتے ہیں کہ ایک حرکت پذیری ایک مقررہ مدت کے بعد واقع ہو۔ منتقلی تاخیر کی خاصیت آپ کو منتقلی کے تاخیر کے لئے تاخیر کی وضاحت کرنے دیتی ہے۔ آپ سیکنڈ میں تاخیر کی وضاحت کرسکتے ہیں۔

آئیے منتقلی کے اثر میں تاخیر کو دیکھنے کے لئے ایک مثال پیش کرتے ہیں۔

div {چوڑائی: 100 px اونچائی: 100px پس منظر: پیلے رنگ کا منتقلی: چوڑائی 3s منتقلی - تاخیر: 1s} div: ہوور {چوڑائی: 300px}
نیچے دیوی عنصر پر ہوور کریں
 
 نوٹ: آپ اثر شروع ہونے سے پہلے 1 سیکنڈ کی تاخیر کا مشاہدہ کر سکتے ہیں
 

مذکورہ کوڈ میں ، جب آپ اپنے کرسر کے ساتھ پیلے رنگ کے خانے پر گھومتے ہیں تو ، آپ (ایک سیکنڈ کے لئے) دیکھیں گے کہ اس کا کوئی اثر نہیں ہوتا ہے۔ ایک سیکنڈ کے انتظار کے بعد ، آپ اس کا اثر دیکھیں گے۔

اس کے ساتھ ، ہم اس سی ایس ایس ٹرانزیشن مضمون کو ختم کرتے ہیں۔ اب آپ اپنے ویب صفحات میں متحرک تصاویر شامل کرسکتے ہیں۔ ان مثالوں کو آزمائیں۔

ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔

جاوا میں کسی پروگرام سے کیسے نکلیں

ہمارے لئے ایک سوال ہے؟ براہ کرم 'سی ایس ایس ٹرانزیشن' بلاگ کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔