illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

jrumble : پلاگین jQuery برای تکان دادن المنتهای مختلف

0 831 ۱۹ اردیبهشت ۹۴

در این مطلب میخوام یک پلاگین jQuery بنام jrumble رو خدمت شما معرفی کنم و اونو آموزش بدم.

jrumble

 

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

میبینید که 4 تا باکس وجود داره و با هاور کردن بر روی اونا افکتهای مختلفی انجام میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.jrumble.min.js و jquery.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

میبینید که 4 تا باکس قرار داده شده. 4 تا div با id های مختلف قرار داده شده و با استفاده از CSS به اونا استایل داده شده. اولین مرحله اینه که برای هر کدام از باکسها ویژگی های مورد نظرمون رو قرار بدیم. برای اینکار بصورت زیر عمل میکنیم :

میبینید که div با id = div1 رو انتخاب کردیم و بعد از اون متد jrumble رو براش فراخوانی کردیم ، این متد ویژگی های زیادی داره که در زیر تعدادی از اونا رو قرار میدم :

  • x : میزان جابجا شدن در جهت افقی ( بر حسب پیکسل )
  • y : میزان جابجا شدن در جهت عمودی ( بر حسب پیکسل )
  • rotation : میزان چرخش ( بر حسب درجه )
  • speed : میزان سرعت تکون خوردن بر حسب میلی ثانیه ( هر چقد کمتر باشد سریعتر تکون میخوره )
  • opacity : اگر مقدار این ویژگی رو true قرار بدین ، هنگام تکون خوردن ، شفافیت باکس مورد نظرتون کم و زیاد میشه
  • minOpacity : کمترین مقدار opacity رو میتونین مشخص کنید. عددی بین 0 تا 1 میتونه باشه

حالا باید ببینید میخواید طی چه رویدادی این تکون خوردن انجام بشه. من میخوام وقتی روی اون المنت هاور شد ، شروع به تکون خوردن بکنه. برای اینکار بصورت زیر عمل میکنم :

میبینید که وقتی ماوس روی div مورد نظر بره stratRumble اتفاق میوفته و ویژگی های مورد نظر بهش اعمال میشه و هر وقت ماوس خارج بشه ، stopRumble اتفاق میوفته و تکون خوردن متوقف میشه.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram