ویبره ، ارتعاش ، تکان ، لرزش و چرخش عناصر در وب

jRumble یک پلاگین jQuery بسیار جالب برای لرزاندن ، تکان های شیطنت آمیز همراه با ارتعاش و چرخش عناصر HTML در صفحات وب است . توسط این پلاگین جذاب می توانید عناصر مختلف مانند لینک ها ، دکمه ها ، عکس ها ، تبلیغات ، پاراگراف و هر آنچه را که می خواهید به حالت ویبره بلرزانید ، ارتعاش دهید ، آرام تکان دهید و یا حالت های شیطنت آمیز ایجاد کنید . این اعمال را میتوان در رویدادهای مختلف اعمال کرد . مثلا" وقتی نشانگر ماوس روی عنصر مورد نظر قرار گرفت یکی از این اعمال انجام شود .

● مشاهده دمو
● دانلود پلاگین و مثال


نحوه استفاده

برای استفاده ابتدا فولدر پلاگین را دانلود کرده و فولدر js موجود در آن را در کنار صفحه وب خود کپی کنید ، سپس برای وارد کردن فایل های پلاگین به صفحه خود این دو خط را در داخل کد صفحه وب خود درست قبل از بسته شدن تگ body کپی کنید :




سپس برای استفاده از هر کدام از حالت های موجود در این پلاگین ، دکمه View Source در پایین آن را کلیک کرده و پس از نمایان شدن کدها ، فقط کد مربوط به دمو مورد نظر خود را کپی کرده و قبل از بسته شدن تگ body یعنی در پایین دو خطی که در مرحله قبل گفتیم به صورت زیر قرار دهید :

$(document).ready(function(){
	$('#my-rumble-div').jrumble();
});

دقت کنید که در تکه کد مثال بالا عبارت my-rumble-div نام عنصری در صفحه وب است که می خواهید حالت مورد نظر روی آن اعمال شود.

مثال

برای اینکه حالتی که در دمو شماره 2 مشاهده میکنید را بر روی یک لینک که id آن برابر با my-link است اعمال کنیم ، پس از افزودن دو خط معرفی فایل های پلاگین ، به صورت زیر عمل میکنیم :

$(document).ready(function(){
$('#my-link').jrumble({
	rangeX: 10,
	rangeY: 10,
	rangeRot: 4
});
});

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

نظرات (2) -

  • هـ

    08/25/1393 09:02:33 ب.ظ | پاسخ به این نظر

    سلام
    هیچکدوم از حالتهای دمو کار نمیکنه.لطفا بررسی کنین

Loading