متحرک سازی آیتم‌ها در impress.js
اگر دوست دارید آیتم‌های موجود در یک اسلاید یک به یک با انیمیشن خاصی وارد صفحه شود، یک راه ساده استفاده از پروژه animate.css است.
برای این کار مراحل زیر را انجام دهید.
مرحله ۱
ابتدا به آدرس animate.css مراجعه کنید و آن را دانلود کنید.
مرحله ۲
لینک فایل animate.css را در بالای فایل HTML خود قبل از بقیه CSS ها قرار دهید.
<head>
. . .
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/impress.css">
. . .
</head>مرحله ۳
انیمیشن مورد نظرتان را انتخاب کنید. برای این کار می‌توانید از صفحه اصلی animate.css استفاده نمایید. (به عنوان مثال zoomIn)
مرحله ۴
در فایل CSS خودتان (impress.css) یا در head فایل HTML، یک کلاس به شکل زیر و با نام مشابه آن انیمیشن ایجاد کنید (مثلا i-zoomIn):
.substep-visible.i-zoomIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}به خط اول دقت کنید این کلاس باید داخل کلاس substep-visible باشد.
در این کلاس سه دستور وجود دارد.
اول: animation-duration که مدت زمان انیمیشن را تعیین می‌کند.
دوم: animation-fill-mode که وضعیت شروع و پایان انیمیشن را تعیین می‌کند.
سوم: animation-name نام انیمیشن مورد نظر را تعیین می کند.
مرحله ۵
آیتم‌های مورد نظر را در کلاس subset و سپس انیمیشن مورد نظرتان (در مثال ما i-zoomIn) قرار دهید.
<li class="substep i-zoomIn">مورد اول</li>
<li class="substep i-zoomIn">مورد دوم</li>
<li class="substep i-zoomIn">مورد سوم</li>کد مثال را ببینید تا نحوه کار را بهتر متوجه بشوید.
