آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پلاگین Ripples در JQuery

دوره های مرتبط با این مقاله

آموزش پلاگین Ripples در JQuery

ایجاد حرکت موجی روی عنصر و تصاویر در زمان حرکت موس روی آن ، یک افکت جذاب است که با استفاده از پلاگین ripples پیاده سازی میشود. این پلاگین برپایه webGL میباشد


آموزش پلاگین Ripples در JQuery

روش استفاده:

فایلهای مورد نظر را به پروژه اضافه میکنیم.

< script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" >< /script >
< script src="js/jquery.ripples.js" >< /script >

یک عنصر را تعریف میکنیم. برای مشاهده بهتر افکت از یک تصویر پس زمینه برای آن استفاده میکنیم.

< div class="demo" style="background-image:url(1.jpg)" >< /div >

با استفاده از کد زیر افکت را روی عنصر انتخابی ، اجرا میکنیم.
لینک تصویر ، رزولوشن حرکت ، سایز موج های ایجاد شده و میزان شکست در صورت حرکت موس را با استفاده از option های آن مشخص کرد.

$ ('.demo').ripples({
  // Image Url
  imageUrl:null,
  // The larger this value, the smoother the rendering and the slower the ripples will propagate.
  resolution: 256,
  // The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
  dropRadius: 20,
  // Basically the amount of refraction caused by a ripple.
  // 0 means there is no refraction.
  perturbance: 0.04,
  // Whether mouse clicks and mouse movement triggers the effect.
  interactive:true,
	});

متدهای زیر را در زمان رویداد خاصی مانند کلیک روی یک دکمه میتوانیم فراخوانی کنیم تا افکت اجرا ، متوقف ، حذف یا ..... شود

// show the effect
$ ('.demo').ripples('show');
$ ('.demo').ripples('hide');
$ ('.demo').ripples('destroy');
$ ('.demo').ripples('play');
$ ('.demo').ripples('pause')

  • 109
  •    170
  • تاریخ ارسال :   1398/11/01

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش پلاگین Ripples در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .