پروژه جاوااسکریپت: Button Ripple Effect

سلام دوستان امروز با یه پروژه باحال اومدم پیشتون.

پروژه امروز خیلی پر کاربرده. یه دکمه که وقتی روش کلیک می کنیم یه موجی روش ایجاد میشه خیلی روی UI تاثیر داره.

خوب مثل همیشه اول از همه میریم سراغ html :

خوب بعد از این میریم سر وقت استایل دادن به دکمه.

اول یه استایل کلی میدیم به صفحمون:

حالا دکمه رو استایل می دیم بهش:

بعد این می ریم که افکت موج رو ایجاد کنیم که بعدا این کلاسو می خوایم بدیم به یه تگ Span که داخل دکمه می خوایم تعریف کنیم:

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

ایجا کارمون تموم شد حالا شروع می کنیم به کد زدن با جاوااسکریپت.

اینجا همه دکمه ها رو که کلاس ripple دارن رو انتخاب می کنیم و یه رویداد واسه همشون تعریف می کنیم:

از این به بعد هر چی که تعریف می کنیم همه داخل رویدادمون قراره تعریف بشن.

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

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

حالا وقتی این دوتا مقدار به دست اومده رو از هم کم کنیم موقعیت کلیک داخل المان دکمه رو بدست میاریم.

یادتون نره همه این متغیرارو لاگ بگیرین تا ببینین چه اتفاقی داره میفته.

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

مشکلی که اینجا داریم اینه که بعد از هر کلیک المان circle ایجاد میشه و از بین نمیره پس کاری ه ما باید بکنیم اینه که بعد نیم ثانیه اونو از بین ببریم. پس از کد زیر استفاده می کنیم.

همینطور که دیدین خیلی راحت تونستیم یه دکمه خیلی جذاب واسه سایتمون طراحی کنیم.

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

تا پروژه بعد بدرووود.