ساخت افکت انیمیشن توپ با jQuery

  • آپدیت شده در تاریخ

ساخت افکت انیمیشن توپ با jQuery

این مقاله آموزشی در مورد ساخت افکت انیمیشن توپ با jQuery است. فقط یک پست سرگرم کننده سریع. این افکت انیمیشنی براساس پارامترهای مختلفی مثل تعداد پرش, سرعت و غیره است.

Bouncing Ball را به احتمال زیاد به عنوان یک بازی سرگرم کننده در گوشی های قدیمی نوکیا دیدید.

در آموزش jQuery قبلی, مثال های بیشتری در مورد انیمیشن های در jQuery دیدیم. برای مثال تغییر پس زمینه با اسکرول صفحه, اسلایدر parallax و .. .

در این مثال از ساخت افکت انیمیشن توپ, یک توپ تنیس در پایین ترین قسمت المنت DIV وجود دارد. با کلیک روی توپ, تابع جی کوئری برای ساخت انیمیشن پرش به همراه توپ فراخوانی می شود.

تعداد پرش و سرعت به این تابع پاس داده می شود. برا اساس این پارامترها ارتفاع پرش و سرعت نیز برای انیمیشن دادن به توپ توسط تابع animate() در jQuery , محاسبه می شود.

ساخت افکت انیمیشن توپ با jQuery

کد HTML و استایل های توپ پرشی (Bouncing Ball)

کد زیر شامل HTML و استایل های لازم برای نمایش تصویر توپ است. با اشاره به این المان تصویر, تابع انیمیشن پرشی با کلیک روی توپ اجرا می شود.

کد ساخت افکت انیمیشن توپ با jQuery

کد زیر تابع جی کوئری برای ساخت افکت انیمیشنی بر روی المان تصویر توپ را نشان می دهد. این تابع تعداد زمان هایی که پرش باید انجام شود را به همراه سرعت دریافت و با استفاده از این پارامترها, ارتفاع پرش را برای هر پرش محاسبه و به عنوان خصوصیت انیمیشن توسط تابع animate در جی کوئری ست می کند.

خروجی : مثال ساخت افکت انیمیشن توپ با jQuery

تصویر زیر به شما اسکرین شات از مثال انیمیشن توپ پرشی را نشان می دهد.

ساخت افکت انیمیشن توپ با jQuery

امیدوارم از آموزش ساخت افکت انیمیشن توپ با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی