تبلیغات
طراحی و بهینه سازیمشاهده
تبلیغات
هاست

آموزش ایجاد افکت shake + جی کوئری

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

در پست امروز دنیای جی کوئری، سری به تابع ()animate زدیم و با استفاده از اون، یک افکت جذاب و متفاوت رو برای شما همراهان عزیز آماده کردیم. در این افکت – که نام اون رو shake گذاشتیم – خواهید دید که چطور میشه با استفاده از تابع animate و چند کد ساده دیگه، زمین و زمان رو به لرزه در آورد .

آموزش ایجاد افکت shake + جی کوئری

خوب! پیش از هرکاری، اول باید کتابخانه جی کوئری رو در قالبتون فراخوانی کنید…
و در مرحله بعد، تابعی رو با نام shake، به صورت زیر تعریف میکنیم: (این تابع رو میتونید در یک فایل js یا داخل تگ script به کار ببرید)

JQUERY:

 

سه بخش اصلی در قطعه کد بالا عبارتند از:

  1. استفاده از پروپرتی position:relative  که موقعیت عنصر رو نسبت به حالت استاتیک تنظیم میکنه.
  2. تعریف یک حلقه جهت کنترل تعداد دفعات لرزه.
  3. استفاده از 4 تابع animate که موقعیت عنصر ارسالی ما رو نسبت به مبدأ و وضعیت left، به صورت انیمیشنی جا به جا میکنند.

و کار تموم.

فقط در مرحله آخر، کافیه که یک عنصر رو به همراه تابع shake فراخوانی کنید. به عنوان نمونه:

لرزش یک div فرضی، در صورت کلیک بر روی آن!

JQUERY:

دانلود


دانلود افزونه اورجینال فارسی فقط هزارتومان ! ( اشتراک طلایی با آپدیت سریع )


مطلب مفیدی بود ؟
کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
8,732کد نمایش چند تبلیغ بنری در یک مکان به صورت تصادفی تاریخ : 1394/06/28
3,376پلاگین جی کوئری Slickhover تاریخ : 1394/12/2
4,021افزونه حرفه ای مکعب نمونه کارها تاریخ : 1392/09/24
5,505اسکریپت بنر های اسلایدی حرفه ای CJ Shuffle تاریخ : 1395/05/14
1,896قرار دادن قسمت درباره نویسنده در وردپرس تاریخ : 1397/03/15
4,366رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 1395/02/2
5,334افزونه ساخت تب های حرفه ای در وردپرس CodeTabs تاریخ : 1396/09/26
3,259Nofollow نمودن خودکار لینک ها تاریخ : 1392/10/20
7,406دانلود ساعت آنالوگ جی کوئری + PSD تاریخ : 1392/08/29
256DNS چیست و چگونه کار می‌کند؟ تاریخ : 1398/03/21
5,538اسکریپت اسلایدر جی کوئری Zoom In/Out نسخه 2.0 تاریخ : 1395/02/28
3,812آموزش تغییر عنوان ایمیل های ارسالی در وردپرس تاریخ : 1393/03/16
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب