CSS3 متحرک تصاویر کا اچھا استعمال کیسے کریں: سبق، نمونہ کوڈ، اور مثال

آرٹیکل نے لکھا:
  • ویب سائٹ کے ڈیزائن
  • اپ ڈیٹ: اگست 28، 2013

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

لہذا، آج ہم دیکھیں گے کہ سی ایس ایس متحرک اور ٹرانزیشن کے ذریعے جے ایس سے بچنے کے لئے کس طرح. ہم بہت ہی اہم اثرات جیسے accordion پینلز اور متحرک ذیلی مینو کے لئے بہت بنیادی اقدامات سے بات کریں گے.

ایک نشست پکڑو، آپ نوٹ پیڈ اور ایک حقیقی براؤزر (جو کچھ بھی IE) اور شروع ہو چکا ہے.

تیار ہونا

ہمارے پاس ایس ایس ایس متحرک تصاویر کا استعمال کرتے ہوئے ہمارے فوائد (اور ہماری جانوں میں ہر چیز کے طور پر نقصانات) ہیں. اگر آپ کو اپنے مالک یا کلائنٹ کو بیچنے کی ضرورت ہے، تو یہ آپ کو ذہن میں رکھنا چاہیے:

  • وہ ممکنہ طور پر تیزی سے ہیں، کیونکہ وہ ہارڈویئر تیز رفتار کا استعمال کرسکتے ہیں (ایچ ٹی ایم ایل ایکس این ایم ایم ایکس پی کے طور پر)
  • وہ موبائل آلات میں بہتر کارکردگی کا مظاہرہ کریں گے اور رابطے کے واقعات کو ٹریک کرنے کے لئے مخصوص کوڈ کی ضرورت نہیں ہوگی
  • جے ایس براؤزر کی طرف سے تشریح کی ضرورت ہے اور براؤزر کو توڑنے کے امکانات بہت زیادہ ہیں. لہذا جب سی ایس ایس ناکام ہوجاتا ہے، تو یہ خاموش ہو جاتا ہے جبکہ جے ایس پورے صفحے کو توڑ سکتا ہے
  • ان کے پاس بہت برا براؤزر کی مدد ہے (یہ سائٹ آپ کو اس مخصوص اعداد و شمار کو جانچنے میں مدد کرے گا: http://caniuse.com/#search )

CSS3 متحرک مثالیں

اس پوسٹ کے گوشت کو شروع کرنے سے پہلے ، آئیے خالص سی ایس ایس میں تیار کردہ کچھ خوبصورت متحرک تصاویر دیکھیں۔

پاک سی ایس ایس ٹویٹر ناک وہیل

متحرک ناکامی ویلے

سٹیون ڈینس، کارروائی میں یہ دیکھیں.

خالص سی ایس ایس سکولنگ کوک کر سکتے ہیں
سی ایس ایس 3 حرکت پذیری مثالیں: طومار کر سکتے ہیں کوک کر سکتے ہیں

رومن Cortes کی طرف سے بنایا، کارروائی میں یہ دیکھیں.

پاک سی ایس ایس چلنے والا انسان

سی ایس ایس 3 حرکت پذیری مثالیں: واک چلنے والا آدمی

اینڈریو ہیریر کی طرف سے بنایا، کارروائی میں یہ دیکھیں.

آپ کے ہاتھوں کو گندی ہو رہی ہے

چلو کوڈ شروع کریں. ہم حرکت پذیری کو متحرک کرنے کے لئے بہت سی ایس ایس چھسو کلاسز استعمال کریں گے. ایماندار ہونے کے لئے، بہت سے ڈویلپرز آپ کو متحرک کرنے اور متحرک کرنے کے لئے جے ایس کا استعمال کرتے ہوئے مشورہ دیتے ہیں، لیکن یہاں ہم آسان طریقہ دیکھیں گے:

#test {پس منظر: سرخ؛ } # ترین: ہور {پس منظر: سبز؛ } # ترین: فعال {پس منظر: نیلے رنگ؛ } # ترین: ہدف {پس منظر: سیاہ؛ }

ہمارے پاس کچھ دوسرے پیچیدہ طبقات ہیں، لیکن آپ کو یہ خیال مل گیا ہے! تو یہاں ایسا ہوتا ہے اگر آپ # ترین عنصر پر کلک کریں (یہ ایک لنک لگ رہا ہے):

  • عام ریاست: پس منظر سرخ ہو جائے گا
  • ہور: جب ماؤس عنصر کے علاقے میں داخل ہوتا ہے تو اس کے پاس ایک سبز پس منظر ہوگا
  • فعال: جب آپ اس پر کرسر پر کلک کریں اور جب ماؤس کا بٹن اب بھی دبائیں تو پس منظر کا رنگ نیلے ہو جائے گا
  • ہدف: موجودہ صفحہ کا URL میں #test ہے جب یہ عنصر سیاہ ہو جائے گا

ان میں سے ہر ایک سی ایس ایس متحرک کے لئے استعمال کیا جا سکتا ہے، مثال کے طور پر آپ اس کوڈ کے ساتھ ہدف موڈ عنصر کے سی ایس ایس حرکت پذیر بنانے کے استعمال کو چالو اور غیر فعال کرنے کے لئے 2 لنکس بنا سکتے ہیں:

<a href='#test'> کو فعال کریں <a href='#'> غیر فعال </a>

سی ایس ایس ٹرانزیشن

سی ایس ایس کی منتقلی کو ابتدائی طور سے ختم ہونے والی ریاست سے آسانی سے بدل جائے گی. لہذا آپ کو "منتقلی" جائیداد کا وقت اور ہر جائیداد کو متاثر کیا جائے گا اور کس طرح حرکت پذیری ہونا چاہئے کا استعمال کرتے ہوئے اہم انتخاب کنندہ میں بیان کریں گے. آئیے ایک مثال دیکھیں:

.سٹسٹ {/ * منتقلی کی پراپرٹی کی مدت کے وقت کی تقریب، * / رنگ: نیلے رنگ؛ منتقلی: رنگ 2s، فونٹ سائز 2s آسانی سے؛ } .ٹیسٹ: ہور {رنگ: سرخ؛ } .سٹسٹ: فعال {فونٹ سائز: 200٪؛ }

جب آپ سب سے قدیم عنصر کو ہٹا دیں گے تو یہ آہستہ آہستہ نیلے رنگ سے لال (کونسا اچھا پیلیٹ، ہہ؟) تبدیل ہوجائے گا. جب آپ عنصر پر کلک کریں تو، فونٹ کا سائز آہستہ آہستہ ڈیفیم ایکسچینج فونٹ سائز کے 200 میں بڑھ جائے گا.

ہمارے پاس "منتقلی ٹائمنگ" جائیداد بھی ہے، جو آسانی سے مقرر ہوتا ہے، کہ کس طرح حرکت پذیری کے لئے دستیاب "وقت" خرچ کیا جائے گا. یہاں ممکنہ اقدار ہیں:

  • لینکر: اختتام سے شروع ہونے والی ہی رفتار
  • آسانی سے: سست شروع
  • آسانی سے: سست اختتام
  • آسانی: آہستہ آہستہ، وسط میں تیز، پھر سست آخر
  • آسانی سے باہر: سست شروع، سست اختتام
  • کیوبک بیزیر (ایک، بی، سی، ڈی): اپنی مرضی کی رفتار

کیوبک بیزیر کی تقریب 4 نمبروں کے ساتھ ایک اپنی مرضی کے مطابق حرکت پذیری تخلیق کرے گی جو 0 سے 1 تک ہوتی ہے، حرکت پذیری کی رفتار X مدت کے لئے ریاضیاتی وکر کی نمائندگی کرتا ہے.

بہتر براؤزر کی مطابقت کے لۓ آپ کو وینڈر، فائر فاکس، اور ویبکٹ کے لئے وینڈر فاریکس پر استعمال کرنا چاہئے.

ڈیو {چوڑائی: 400PX؛ - منتقلی: چوڑائی 2s؛ مووم ٹرانسمیشن: چوڑائی 2s؛ ویب سائٹ کی منتقلی: چوڑائی 2s؛ منتقلی: چوڑائی 2s؛ }

اس کے علاوہ، آپ براؤزر چوڑائی (موبائل آلات، گولیاں) کے لحاظ سے مختلف ٹرانزیشن کی وضاحت کرنے کے لئے میڈیا کے سوالات کا استعمال کرسکتے ہیں. یہ ایک سادہ مثال ہے:

جسم {فونٹ سائز: 1em؛ }media سکرین اور (زیادہ سے زیادہ چوڑائی: 800PX) {جسم {فونٹ سائز: 0.8em؛ }}media سکرین اور (زیادہ سے زیادہ چوڑائی: 400PX) {جسم {فونٹ سائز: 0.7em؛ }}

یہاں فونٹ کا سائز اچانک بدل جائے گا جب آپ براؤزر کی چوڑائی میں اضافہ کرتے ہیں. یہ کوڈ اس سے روکنے سے روکتا ہے کہ اس سے بہت زیادہ ہموار منتقلی ہے.

جسم {ترمیم: فونٹ سائز .5s لکیری؛ -موز-منتقلی: فونٹ سائز. ایکس این ایل ایکس لکیری؛ ویب سائٹ کی منتقلی: فونٹ سائز. 5s لکیری؛ منتقلی: فونٹ سائز. 5s لکیری؛ }

اگر آپ کو چوڑائی، رنگ، paddings، مینو ڈسپلے تبدیل کرنا چاہتے ہیں تو آپ اس تصویر کا استعمال کرسکتے ہیں.

سی ایس ایس حرکت پذیری - اصلی تفریح ​​شروع ہوتا ہے

حرکت پذیری ایک انتخاب کنندہ میں بیان کردہ ٹرانزیشن کی ترتیب ہے. سی ایس ایس متحرک کی وضاحت کرنے کے لئے آپ کو 2 مرحلے پر عمل کرنے کی ضرورت ہوگی.

حرکت پذیری کے مراحل کی ترتیب کو متعین کرنے کے لئےkeyframe حکمران استعمال کیا جاتا ہے، اور یہ ایک منفرد نام اور شیلیوں کی وضاحت کی جاتی ہے جو اس حرکت پذیری کی وضاحت کرتا ہے. معمول کی طرح ہمیں اس طرح کی مثال کے طور پر کچھ بیچنے والے فراموش کی ضرورت ہوگی.

/ * ہر وینڈر کے لئے ایک ہی کوڈ * / @ -O-keyframe میرا حرکت پذیری {... @ -oz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * حرکت پذیری کا نام * /keyframe میرا حرکت پذیری {/ * فریم انتخاب کنندہ / 0٪ {/ * فریم سٹائل * / بائیں: 0px؛ اوپر: 0px؛ } 25٪ {بائیں: 200PX؛ اوپر: 0px؛ } 50٪ {بائیں: 200PX؛ اوپر: 200px؛ } 75٪ {بائیں: 0PX؛ اوپر: 200px؛ } 100٪ {بائیں: 0PX؛ اوپر: 0px؛ }}

لہذا، ہر انداز فریم / ٹائم فریم (جیسے ایک فریم حرکت پذیری سے ان فریموں) کی طرف سے بیان کی جاتی ہے جس میں فی فیصد اور شیلیوں کو لاگو کرنا چاہئے. یہ کلیدی فریم، مثال کے طور پر یہ کہتا ہے کہ عنصر بائیں، پھر اوپر، پھر دائیں طرف، اور پھر نیچے کی طرف منتقل ہو جائے گا.

قدم 1 کی پیروی کے بعد اور آپ کی keyframe پیدا کرنے کے بعد آپ اسے اصل میں ایک عنصر میں لاگو کرسکتے ہیں. اس کے بعد ہم بہت ساری منطق کو استعمال کریں گے جیسے ہم نے سی ایس ایس کی منتقلی کے ساتھ کیا ہے، فرق یہ ہے کہ اب ہماری "منتقلی" ایک بہت پیچیدہ حرکت پذیر ہے.

اس کا اطلاق کرنے کے لئے ہم حرکت پذیر ملکیت کا استعمال کریں گے اور اس کے پاس 7 ذیلی خصوصیات ہیں:

  • نام: وہ منفرد شناختی والا
  • دورانیہ: 0٪ سے 100 تک کب تک لے جائے گا
  • وقت کی تقریب: منتقلی ٹائمنگ تقریب کے طور پر بہت زیادہ ہی ہے
  • تاخیر: 0 شروع کرنے کے لۓ کتنا وقت لگے گا
  • تکرار کی گنتی: ہمارے پاس کتنے تکرارات موجود ہیں ("لامحدود" ایک لامحدود لوپ کے لئے)
  • سمت: عام یا متبادل (ریورس)
  • پلے ریاست: اگر حرکت پذیری چل رہا ہے یا روک دیا جاتا ہے

جب یہ صفحہ کا ہدف ہے تو یہ ہماری حرکت پذیری # ترین عنصر پر لاگو کرے گی:

# ترین: ہدف {/ * حرکت پذیری کا نام | مدت | وقت کی تقریب | تاخیر | تکرار کی گنتی | سمت | کھیل ریاست * / حرکت پذیری: میرا حرکت پذیر 10s لکیری 0s لامحدود عام چل رہا ہے؛ }

اس کے ساتھ ذہن میں ہم چند اچھے مثال بنا سکتے ہیں.

سی ایس ایس صرف اکاؤنڈرن

ہم سی ایس ایس حرکت پذیریوں کے استعمال کرنے کے ساتھ ملنے والی پینل تخلیق کریں گے. یہاں بنیادی HTML ڈھانچہ ہے:

<div class = "accordion"> <a href="#tab1"> ٹیب 1 </a> <div id = "tab1"> <p> متن 1 </ p> </ div> <a href = "# tab2 "> ٹیب 2 </a> <div id =" tab2 "> <p> متن 2 </ p> </ div> <a href="#tab3"> ٹیب 3 </a> <div id =" tab3 "> <p> متن 3 </ p> </ div> </ div>

یہ صرف پینل اور لنک تشکیل دے گا جو ان میں سے ہر ایک کو متحرک کرے گا. اور یہاں ہے جہاں جادو ہوتا ہے:

/ * کسی بھی ڈیو جو accordion * کے اندر اندر ہے * / غلطی ڈیو / / * پہلے سے طے شدہ * / اونچائی سے پوشیدہ ہے: 0؛ چھپا ہوا رساو؛ / * سیاہ جادو * / منتقلی: اونچائی 1s؛ } / * جب ذکر کردہ ڈوی ہدف ہے / / اکاؤنڈ ڈیو: ہدف {/ * اونچائی: آٹو کام نہیں کرے گا، لیکن یہ ٹھیک * / اونچائی کام کرے گا: 80PX؛ }

بہت آسان، ہہ؟ اور آپ نے اپنی پوری زندگی اس کے لئے جی ایس کا استعمال کرتے ہوئے خرچ کیا ہے؟ :)

ذیلی مینیو کے ساتھ CSS صرف مینو

اور یہ ایک اور سادہ درخواست ہے. آپ کو یقینی طور پر آپ کی ویب سائٹ میں ایک نیویگیشن مینو ہے، اور اکثر ہمیں کچھ ذیلی مینیوس استعمال کرنے کی ضرورت ہے. اشیاء کو دکھانے اور چھپانے کا بہترین طریقہ jQuery، صحیح استعمال کر رہا ہے؟ ٹھیک ہے، آپ کو اس کوڈ کی جانچ کرنے کے بعد دوبارہ سوچنا:

<nav> <ul> <li> <a href='#item1'> آئٹم 1 </a> <div> <ul> <li> <a href='#item11'> آئٹم 1.1 </a> </ li> <li> <a href='#item12'> آئٹم 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> آئٹم 2 </a> <div> <ul> <li> <a href='#item21'> آئٹم 2.1 </a> </ li> <li> <a href='#item22'> آئٹم 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

اور جادوگر یہاں شروع ہوتا ہے:

ایک {/ * صرف لنکس کو بہتر بنانا * / ڈسپلے: بلاک؛ بھرتی: 4px؛ } نام {متن-سیدھ: مرکز؛ } / * کسی بھی مینو (اہم ایک سمیت) * / نیویارک {ڈسپلے: ان لائن بلاک؛ فہرست طرز: کوئی نہیں؛ } nav> ul> li {/ * افقی اشیاء (عمودی کام بھی ٹھیک کام کرے گا) * / فلوٹ: بائیں؛ } نیوی ڈی ڈیو {/ * کسی بھی ذیلی مینو * / اونچائی کو ختم کر دیتا ہے: 0؛ چھپا ہوا رساو؛ / * Houdini احساس * / منتقلی: اونچائی 1s؛ } نام میں: ہور> div {اونچائی: 56px؛ }

سمنگ

یہ یقینی طور پر صرف ایک شروعاتی گائیڈ ہے. سی ایس ایس کا استعمال کرتے ہوئے کیا جا سکتا ہے کہ بہت سارے دیگر بہت اچھے اثرات اور بہت سی چیزیں جو ابھی تک آتی ہیں اس میں موجود ہیں.

تو، کیا تم نے اس سے پہلے استعمال کیا ہے؟ کیا آپ سی ایس ایس حرکت پذیری کے لئے ایک اور اچھی درخواست کے بارے میں سوچ سکتے ہیں؟ تبصرے کا استعمال کرتے ہوئے اپنے خیالات کا اشتراک کریں!

روچسٹر اولیورا کے بارے میں

میں اسجوبا (ایم جی)، برسل سے ویب ڈیزائنر اور کاروباری ادارے ہوں. میں غیر معمولی موضوعات کے بارے میں لکھنا چاہتا ہوں اور کچھ ٹھنڈی چیزیں کر رہا ہوں.

رابطہ کریں: