کدهای جذاب و دیدنی ( Liquid Button ) : افکت آبگونه و ژله ای زیبا برای دکمه

زمان مطالعه: 1 دقیقه
۰۸ مهر ۱۳۹۶

در این قسمت میخوام یک کد ( Liquid Button ) جالب رو در اختیارتون بزارم.

Liquid Button

توضیحات مربوط Liquid Button

همونطور که دیدید یک دکمه آبکی و ژله مانند قرار داده شده و زمانی که بر روی اون هاور میکنیم، افکت زیبایی براش اجرا میشه.

این دکمه با استفاده از Javascript و Canvas به وجود اومده و میتونین کدهای اون رو مشاهده کنید.

یک سایدبار در سمت راست قرار گرفته که میتونین با استفاده از اون متغیرهای Javascript رو بصورت آنی تغییر بدین و خروجی رو مشاهده کنید.

این سایدبار با استفاده از ابزار dat.gui قرار داده شده و میتونین از اون ایده بگیرید.

با استفاده از این سایدبار میتونین تمام ویژگی ها و خصوصیتهای مربوط به دکمه را تغییر دهید.

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

موفق باشید.

یا علی

Source

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

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

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

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل