کلاس‌های impress.js‎

نوشته حسین بهنودی در ۲ خرداد ۱۳۹۹

در impress.js سه کلاس اصلی وجود دارد که دانستن آن بسیار مهم است.

۱- present

اسلاید فعلی که اکنون در حال نمایش است.

۲- past

اسلایدهای قبلی که قبل از این اسلاید نمایش داده شده است.

۳- future

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

نرم افزار impress.js به صورت مداوم این کلاسها را روی تگ های کلاس step به روز می‌کند.

شما با استفاده از این کلاسها در فایل CSS می‌توانید تغییرات دلخواه خود را روی آن بدهید مثل انیمیشن در هنگام ظاهر شدن یک اسلاید. یا مقدار opacity یک اسلاید قبل و بعد از نمایش و غیره.

به عنوان مثال:

.present .animation-1 {
 transform: scale(1.2);
 transition-duration: 1s;
}

در مثال بالا هر تگی با کلاس animation-1 در هنگام نمایش با یک انیمیشن خاص (در این مثال بزرگ شدن) ظاهر می‌شود.