طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


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

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

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

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

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

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

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

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

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

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

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

حتما بخوانید  افزودن آیکون شبکه اجتماعی شناور با jQuery

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

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

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

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

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

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

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

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه