آموزش ساخت دکمه ضربان دار (pulse) در المنتور

5/5 - (1 امتیاز)

ساخت دکمه ضربان دار در المنتور

در این آموزش، با استفاده از CSS سفارشی المنتور، یک افکت پالس برای دکمه‌ها ایجاد می‌کنیم. افکت پالس با گسترش سایه (box-shadow) از داخل دکمه به بیرون، حس ضربان و تکرار را شبیه‌سازی می‌کند. کد زیر در بخش Custom CSS ویجت دکمه قرار می‌گیرد:

@keyframes dev-afshin{
    from{
        box-shadow: 0 0 0 0 #1500FF;
    }
    to{
        box-shadow: 0 0 0 20px #1500FF00;
    }
}

selector a{
    animation: dev-afshin
    0.5s infinite
}

1

2

3

4

5

6

7

8

9

10

11

12

13

@keyframes dev-afshin{

from{

box-shadow: 0 0 0 0 #1500FF;

}

to{

box-shadow: 0 0 0 20px #1500FF00;

}

}

selector a{

animation: dev-afshin

0.5s infinite

}

ویدیو آموزش

تعریف @keyframes dev-afshin

@keyframes چارچوب اصلی انیمیشن در CSS است. نام انیمیشنی که تعریف می‌کنید (در اینجا dev-afshin) هنگام فراخوانی در ویژگی animation استفاده خواهد شد. داخل بلاک @keyframes می‌توانید چند مرحله (from/to یا درصدی) برای تغییر استایل‌ها مشخص کنید. هر بار که انیمیشن اجرا می‌شود، مرورگر از حالت اولیه (from) تا حالت نهایی (to) را به مرور اجرا می‌کند.

مراحل from و to

from و to دو نقطه کلیدی انیمیشن هستند:

from بیانگر شروع انیمیشن است؛ در اینجا box-shadow با اندازه 0px و رنگ ثابت #1500FF (آبی پررنگ) تعریف شده.
to بیانگر پایان انیمیشن است؛ سایه به 20px گسترش یافته و رنگ آن با شفافیت کامل (#1500FF00) محو می‌شود.

این گسترش و محوشدن متصل به هم، جلوه ضربان را شبیه‌سازی می‌کند.

ویژگی box-shadow

box-shadow چهار پارامتر اصلی دارد: افقی، عمودی، بلور (blur) و اندازه انتشار (spread). در مثال ما مقادیر به صورت 0 0 0 20px تنظیم شدند که یعنی:

سایه دقیقاً در مرکز عنصر با فاصله صفر
بدون بلور
انتشار 20px

در نهایت رنگ سایه از جامد به شفاف تغییر می‌کند تا حالت پالس تدریجی ایجاد شود.

فراخوانی انیمیشن با selector a

در المنتور، selector به شناسه خود ویجت اشاره دارد. وقتی می‌نویسیم selector a، یعنی انیمیشن را روی تگ <a> درون دکمه اعمال می‌کنیم.

ویژگی‌ animation سه بخش اصلی دارد:

نام انیمیشن (dev-afshin)
مدت زمان (0.5s)
تکرار بی‌نهایت (infinite)

با این تنظیمات، هر نیم‌ثانیه انیمیشن اجرا شده و دوباره از نو شروع می‌شود.

نکات تکمیلی

به طور پیش‌فرض تابع زمان‌بندی (timing function) انیمیشن ease است. می‌توانید با افزودن linear یا ease-in-out تجربه متفاوتی بسازید.
رنگ‌های شفاف در هگز 8 رقمی (#RRGGBBAA) تعریف می‌شوند؛ در انتهای مقدار رنگ، دو رقم آخر میزان شفافیت را مشخص می‌کنند.
برای سازگاری بیشتر با مرورگرهای قدیمی، می‌توانید پیشوندهای -webkit- و -moz- را به @keyframes و animation اضافه کنید.

پیشنهادها و ایده‌های بیشتر

رسم دو حلقه پالس با تأخیر (delay) متفاوت برای عمق بیشتر
ترکیب transform (مثل scale(1.1)) در keyframes برای افزایش سایه و اندکی بزرگ‌نمایی
تغییر رنگ سایه بر اساس وضعیت hover یا نوع دکمه
استفاده از متغیرهای CSS برای سریع‌تر تغییر دادن رنگ، مدت زمان و اندازه پالس
قرار دادن افکت روی آیکون یا تصویر پس‌زمینه به جای لینک داخلی

اگر دوست دارید افکت‌های دیگری به دکمه‌تان اضافه کنید یا سؤالی درباره گسترش انیمیشن‌ها دارید، خوشحال می‌شوم راهنمایی کنم!

نوشته‌های تازه

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

ایده پردازش