آپ کی ویب سائٹ پر UI متحرک تصاویر شامل کریں

Feb 4, 2026
کيسے

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

  • سی ایس ایس حرکت پذیری کے نئے فرنٹیئر کو تلاش کریں

ویب کے لئے عمارت کے دوران، خاص طور پر جب یہ حرکت پذیری ہوتی ہے، تو آپ کو براؤزر کی حمایت اور کارکردگی جیسے چیزوں پر غور کرنا ہوگا (مہذب ویب میزبانی یہاں مدد کریں گے). اس سبق میں، ہم UI حرکت پذیری اور ٹرانزیشن بنانے کے لئے دو بہترین حل کے ذریعے آپ کو چلیں گے.

ہم سی ایس ایس کا ایک مجموعہ استعمال کریں گے Greensock. (GSAP). ہم سب سی ایس ایس کے بارے میں آگاہ ہیں لیکن آپ میں سے کچھ گرینکاک پلیٹ فارم سے آگاہ نہیں ہوسکتا. Greensock ایک جاوا اسکرپٹ فریم ورک ہے جو آپ کو آسانی سے کوڈ کی چند لائنوں کا استعمال کرتے ہوئے HTML عناصر کے ساتھ شاندار حرکت پذیری تخلیق کرنے کے قابل بناتا ہے.

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

UI animations: icons

ہمارے پاس چھ نیویگیشن شبیہیں ہیں اور ان میں سے ایک کو ظاہر ہوتا ہے کہ ہور ریاست کو ایک بار نظر آئے گا جب حرکت پذیری مکمل ہوجائے گی

نیویگیشن کی تعمیر

سب سے پہلے، ہم ایک نیا index.html فائل تشکیل دے گا اور چھ لنکس کے ساتھ ہمارے نیوی گیشن کے علاقے قائم کریں گے. ہر لنک آئنیکن سے لے جانے والے آئیکن سے بنائے جائیں گے. ہمیں ہر ایک کو کلاس تفویض کرنے کی ضرورت ہوگی. 

 & lt؛ ڈوی کلاس = "نیویگیشن بار" اور جی ٹی؛
& lt؛ a href = "#" کلاس = "Navlogo آئن- iOS-Star-Outline" & GT؛ & lt؛ / & gt؛
& lt؛ a href = "#" کلاس = "navlogo آئن- iOS-List-Outline" & GT؛ & lt؛ / & gt؛
& lt؛ ایک href = "#" کلاس = "Navlogo آئن- iOS-chatboxes-outline" & gt؛ & lt؛ & & gt؛
& lt؛ ایک href = "#" کلاس = "Navlogo آئن- iOS-ہوم آؤٹ لائن" اور جی ٹی؛ & lt؛ / & gt؛
& lt؛ a href = "#" کلاس = "Navlogo آئن- iOS-PIE-Outline" & GT؛ & lt؛ / & gt؛
& lt؛ a href = "#" کلاس = "Navlogo آئن- iOS-Gear-outline" & gt؛ & lt؛ / & gt؛
& lt؛ / div & gt؛

ہم مکمل ایچ ٹی ایم ایل یا سی ایس ایس دستاویز کو تفصیل میں نہیں ڈھونڈیں گے لیکن آپ کر سکتے ہیں GitHub سے مکمل کوڈ لسٹنگ حاصل کریں .

اگلا، ہمیں ایک سی ایس ایس فائل بنانے کی ضرورت ہوگی جس میں style.css کہا جاتا ہے اور پھر ionicons درآمد کرنے کے لئے کوڈ کی مندرجہ ذیل لائن داخل کریں: 

 import url (https://code.ionicframework.com/inicons/2.0.1/css/ionicons.min.css)؛

ہم اب کلاس قائم کریں گے Navlogo. شیلیوں شیٹ کے اندر ہماری نیویگیشن تصاویر کے لئے. یہاں ہم پوزیشن، اونچائی، فونٹ سائز وغیرہ قائم کریں گے. 

 .navlogo {
  پوزیشن: رشتہ دار؛
  فونٹ سائز: 40px؛
  چوڑائی: 75px؛
  مارجن: 40px؛
  اونچائی: 75px؛
  لائن اونچائی: 75px؛
  ڈسپلے: ان لائن بلاک؛
  رنگ: #fff؛
}

.navlogo: کے بعد {
  پوزیشن: مطلق؛
  اوپر: 0؛
  نیچے: 0؛
  بائیں: 0؛
  دائیں: 0؛
  سرحد: 2px ٹھوس # e6e6e6؛
  مواد: ''؛
  Z-index: -1؛ -1؛
  سرحدی ردعمل: 50٪؛
}

اگلا، ہمیں ہمارے لئے حرکت پذیری قائم کرنے کی ضرورت ہے .navlogo. عنصر. یہاں ہم گردش اور منتقلی کے اثرات پیدا کریں گے، ساتھ ساتھ ہور پر عنصر کا رنگ تبدیل کر دیں گے. 

 .navlogo: پہلے،
.navlogo: کے بعد {
  Webkit-Transition: تمام 0.45s آسانی سے باہر؛
  منتقلی: تمام 0.45s آسانی سے باہر؛
}
.navlogo: ہور،
.navlogo: فعال،
navlogo.hover {
  رنگ: # C0392B؛
}
.navlogo: ہور: کے بعد،
.navlogo: فعال: کے بعد،
navlogo.hover: {کے بعد {
  سرحدی رنگ: شفاف # C0392B؛
  Webkit-transform: گھومنے (360deg)؛
  ٹرانسمیشن: گھومنے (360 ڈی جی)؛
}

آخر میں، ہمیں اس واقعہ کو شامل کرنے کی ضرورت ہوگی جو ہور کلاس کو ہٹانے کے بعد جب ماؤس ہمارے علامات پر زیادہ نہیں ہورہی ہے. اس بات کو یقینی بنانا ہے کہ ہماری علامت (لوگو) اس کی حرکت پذیری سے باہر آتی ہے. main.js نامی ایک نیا جاوا اسکرپٹ فائل بنائیں اور پھر مندرجہ ذیل کوڈ درج کریں: 

 $ (". ہور"). Mouseleave (
  فنکشن () {
    $ (یہ) .removeclass ("ہور")؛
  }
)؛

ہماری نیویگیشن اب جانے کے لئے تیار ہے، کچھ ہائپر لنکس کو شامل کرنے کے علاوہ. ہم نے اس کو صرف CSS3 استعمال کرکے حاصل کرنے میں کامیاب کیا ہے.

لوڈ پر تخلیق اور متحرک بٹن

UI animations: animated buttons

بٹن ایک دوسرے کی طرف سے ایک دوسرے کی تاخیر کے درمیان میں ایک ہی دکھائے جائیں گے. Greensock آپ کو کسی بھی HTML عنصر کے ساتھ ایسا کرنے کے قابل بناتا ہے

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

سب سے پہلے، ہمیں index.html فائل دوبارہ کھولنے اور ذیل میں کوڈ کا استعمال کرتے ہوئے ہمارے بٹن سیکشن کو دوبارہ کھولنے کی ضرورت ہوگی. 

 & lt؛ div id = "battlearea" & gt؛
& lt؛ بٹن کی کلاس = "Anibutton" اور GT؛ پس منظر کا رنگ تبدیل کریں اور ایل ٹی؛ / بٹن اور جی ٹی؛
& lt؛ بٹن کی کلاس = "ایبٹن" اور جی ٹی؛ اختیاری 1 اور ایل ٹی؛ / بٹن اور جی ٹی؛
& lt؛ بٹن کی کلاس = "anibutton" اور gt؛ اختیاری 2 & lt؛ / بٹن اور GT؛
& lt؛ بٹن کی کلاس = "ایبٹن" اور جی ٹی؛ اختیاری 3 اور ایل ٹی؛ / بٹن اور جی ٹی؛
& lt؛ / div & gt؛

پھر ہم & lt کے اندر گرینکاک لائبریری کے حوالے سے ایک حوالہ قائم کرنے کی ضرورت ہے؛ سر اور جی ٹی؛ سیکشن 

 & lt؛ سکرپٹ SRC = "https:/cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt؛ & lt؛ / script & gt؛

آخر میں، ہمیں اپنی حرکت پذیری قائم کرنے کی ضرورت ہے. یہ صرف کوڈ کی ایک لائن لے جائے گا. staggerfrom. ایک ایسا فنکشن ہے جو ہمارے عنصر کے آغاز کا وقت ضائع کرے گا. ہمارے بریکٹ میں، ہم عنصر کے نام کی وضاحت کرتے ہیں. اس صورت میں یہ ہوگا .آپٹن . ہمیں ایک مدت مقرر کرنے کی ضرورت ہے اور اس صورت میں یہ ہر ایک کے درمیان ایک سیکنڈ مقرر کیا جاتا ہے Anibutton. عنصر. 

 Tweenmax.staggerrom ('. Anibutton'، 1، {دھندلاپن: 0}، 1)؛

پس منظر اور عنصر رنگ کی منتقلی

UI animations: colour transition

اس طرح UI ایک رنگ سے ایک رنگ سے پس منظر اور بٹن کی منتقلی کے بعد نظر آئے گا

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

اس بات کو یقینی بنائیں کہ آپ کے پاس ایک پس منظر کا رنگ اور سرحد اور متن کا رنگ style.css فائل میں آپ کے صفحے کے لئے قائم ہے. 

 .نانبٹن {
سرحد: 2px ٹھوس # 000؛
رنگ: # 000؛
}

اگلا، ہم اپنے مختلف گرینک رنگ ٹرانزیشن قائم کرنے کے لئے جاوا اسکرپٹ فنکشن بنائیں گے. 

 فنکشن تبدیلی بیکارڈ ()
{
   Tweenmax.to ("جسم"، 3، {پس منظر میں: "لکیری-گریجویٹ (بائیں، # 646580، # 212121)"})؛
   Tweenmax.to (". Anibutton"، 3، {رنگ: "# FFF"})؛
   Tweenmax.to (". Anibutton"، 3، {سرحد: "2px ٹھوس #ffff"})؛
}

ہم یہاں ایک سیاہ موڈ کے لئے جا رہے ہیں یہاں دیکھو، پس منظر سیاہ ہو جائے گا لیکن بٹن روشنی دکھائے جائیں گے. کوڈ کا پہلا لائن پس منظر کا رنگ تین سیکنڈ کے دوران ایک سیاہ تبدیلیوں میں تبدیل کرے گا. دوسرا اور تیسری لائن تین سیکنڈ کے دوران متن کے رنگ اور سرحد کو تبدیل کرے گا.

آخر میں، ہمیں کال کرنے کی ضرورت ہوگی پس منظر تبدیل کریں() انڈیکس. html فائل میں ہمارے بٹنوں میں سے ایک سے فنکشن. 

 & lt؛ بٹن کی کلاس = "anibutton" OnClick = "تبدیلی بیک بیک میدان ()" اور GT؛ پس منظر اور ایل ٹی؛ / بٹن اور جی ٹی؛

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

یہ مضمون اصل میں مسئلہ 309 میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 309 خریدیں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

  • سی ایس ایس کے ساتھ متحرک اور سوئچ عنوانات
  • سپر تیز رفتار سی ایس ایس کے لئے 5 تجاویز
  • سی ایس ایس اپنی مرضی کے مطابق خصوصیات کا تعارف

کيسے - انتہائی مشہور مضامین

آرٹریج 5 کے ساتھ پیٹرکسک پورٹریٹ آرٹ پینٹ

کيسے Feb 4, 2026

آرٹریج ایک مقبول ڈیجیٹل آرٹ کا آلہ ہے (زیادہ کے لئے، ہمارے ملاحظہ کریں ..

3D آرٹ میں 2D عکاسی کو تبدیل کریں

کيسے Feb 4, 2026

میرا سفر کرنے میں میرا سفر 3D آرٹ کچھ سال پہلے شروع ہوا جب میرے ب�..

8 ضروری ورڈپریس سیکورٹی راز

کيسے Feb 4, 2026

گزشتہ 15 سالوں میں ورڈپریس دنیا کا سب سے زیادہ مقبول مواد مینجمنٹ سسٹم بن گیا ہے. کے ساتھ شروع کرنے اور انتہ..

ایک ویڈیو گیم کے لئے ایک playable اوتار ڈیزائن

کيسے Feb 4, 2026

اس کے لئے فوٹوشاپ ٹیوٹوریل ، میں ایک playable انسانی پیدا کروں گا، �..

ایپلی کیشنز کی تعمیر کریں جو آف لائن کام کرتے ہیں

کيسے Feb 4, 2026

ایک طویل وقت کے لئے، آف لائن کی فعالیت، پس منظر کی مطابقت پذیری اور دھکا..

بچوں کے لئے متحرک کرنے کے لئے سیکھیں

کيسے Feb 4, 2026

بلیو چڑیا گھر کے بدر الدین 13 مارچ کو عمودی طور پر عمودی طور پر بحث کریں گ..

پیارے کارٹون حروف کیسے بنائیں

کيسے Feb 4, 2026

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 صفحہ 2. کردا�..

مجسمہ اور پینٹ کی نقل مکانی کے نقشے کو کیسے جوڑنا

کيسے Feb 4, 2026

بعض اوقات یہ ان سب کو مجسم کرنے کے بجائے، مختلف بے گھر نقشے کو یکجا کرنے ..

اقسام