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

هاست

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

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

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

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

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

JQUERY:

 

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

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

و کار تموم.

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

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

JQUERY:

لطفا به این مطلب امتیاز بدید


دانلود


هاست مناسب برای وردپرس و سایر اسکریپت ها وطن هاست >

مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

لینک کوتاه مطلب : https://www.20script.ir/?p=7572

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
7,059پلاگین لودر جی کوئری Spring Loaders تاریخ : 2016/04/21
5,285آموزش ترفندهای جستجو در گوگل تاریخ : 2016/08/2
5,319انتخاب کلمات کلیدی حرفه ای تر برای سئو بهتر تاریخ : 2016/07/29
25,563آموزش رفع مشکل نصب افزونه و قالبهای وردپرس تاریخ : 2014/01/10
7,867نمایش تصاویر به سبک تم فارست با جی کوئری تاریخ : 2014/07/26
2,508نمایش عنوان پست هایی که در آینده منتشر خواهند شد تاریخ : 2018/06/3
4,144پلاگین جی کوئری Slickhover تاریخ : 2016/02/21
1,608تبدیل تصاویر به صورت یک نقشه با MobilyMap تاریخ : 2019/11/8
6,620اسکریپت ایجاد صفحات Flip Book با اسکریپت WOWBook تاریخ : 2013/10/29
4,259آموزش افزودن متن دلخواه آخر مطالب وردپرس تاریخ : 2016/03/13
3,919نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 2016/04/13
3,452آموزش تصویری تغییر دامنه سایت در گوگل وبمستر تاریخ : 2018/04/13
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب