ترفندهای پیشرفته jQuery (قسمت 57)

دسته بندی: جاوا اسکریپت
زمان مطالعه: 2 دقیقه
۱۹ آذر ۱۳۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 96 : تکان دادن المنتها با jRumble

jRumble یک پلاگین سبک و کم حجم هست که نمیشه اون رو پلاگین خیلی مهم و اساسی دونست ولی کار کردن با اون جالب و جذابه.

در ابتدا باید این ابزار رو include کنید:

<script src="jquery.jrumble.min.js"></script>

در ابتدا اون div که میخایم حرکت بدیم رو قرار بدیم:

<div id="rble" style="width:200px;height:200px;background:#fff"></div>

حالا برای اینکه از این ابزار استفاده کنید بروش زیر عمل میکنیم:

$('#rble').jrumble();

برای اینکه شروع بکار کنه باید بصورت زیر عمل کنید:

$('#rble').trigger('startRumble');

برای متوقف کردن هم بصورت زیر عمل میکنیم:

$('#rble').trigger('stopRumble');

ویژگی های مختلفی وجود داره که میتونین اونا رو قرار بدین:

  • x : محدوده تکان خوردن در جهت افقی رو مشخص میکنیم. مقدار پیش فرض 2 پیکسل هست
  • y : محدوده تکان خوردن در جهت عمودی رو مشخص میکنیم. مقدار پیش فرض 2 پیکسل هست
  • rotation : محدوده چرخش که بر حسب درجه. مقدار پیش فرض 1 درجه هست
  • speed : میتونین با استفاده از این خصوصیت سرعت تکان خوردن رو مشخص کنید. هر چه این عدد کمتر باشه ، سریعتر تکون میخوره. مقدار پیش فرض این خصوصیت 15 هست.
  • opacity : با true کردن این ویژگی میتونین کاری کنید که opacity المنت تغییر بکنه.
  • opacityMin : با استفاده از این خصوصیت میتونین کمترین میزان opacity رو مشخص کنید
$('#sample').jrumble({
	x: 10,
	y: 10,
	rotation: 4
});

مثلا کد بالا باعث میشه که در جهت افقی و عمودی 10 پیکسل تکون بخوره و بصورت شعاعی هم 4 درجه میچرخه.

مثلا فرض کنید میخایم با هاور کردن بر روی المنت تکون خوردن شروع بشه و با خارج شدن از حالت هاور متوقف بشه.

$('#sample').hover(function(){
	$(this).trigger('startRumble');
}, function(){
	$(this).trigger('stopRumble');
});

از این ویژگی و این ابزار میتونین برای جلب توجه کاربران استفاده کنید.

اینم یک مثال دیگه:

$('#sample').jrumble({
	x: 6,
	y: 6,
	rotation: 6,
	speed: 5,
	opacity: true,
	opacityMin: .05
});

خروجی:jrumble

امیدوارم از این مطلب خوشتون اومده باشه.

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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