ورود یک به یک آیتم‌ها در impress.js

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

بسیاری از اوقات، سخنرانان ترجیح می‌دهند موارد داخل یک اسلاید، به یک باره ظاهر نشوند و یکی یکی وارد صفحه شوند. در impress.js یک کلاس برای این کار در نظر گرفته شده است. نام این کلاس substep است.

در داخل یک کلاس step مواردی که می خواهید در ابتدا ظاهر نشود در کلاس substep قرار دهید. هنگام ارائه با کلیک یا کلید کیبرد مواردی که با کلاس substep تعریف شده‌اند یکی یکی و به ترتیب در صفحه ظاهر می‌شوند.

HTML
<-- Slide 3 -->

<div class="step"">
  <h3">اسلاید سوم</h3">
    <ul">
      <li class="substep"">مورد اول</li">
      <li class="substep"">مورد دوم</li">
      <li class="substep"">مورد سوم</li">
      <li class="substep"">مورد چهارم</li">
      <li class="substep"">مورد پنجم</li">
    </ul">
</div">

در مثال فوق عبارت «اسلاید سوم» همزمان با ورود اسلاید نمایش داده می‌شود. و پس از آن با زدن هر کلید یک مورد در صفحه ظاهر می‌شود.

البته با کمک دستورات CSS هر گونه انیمیشنی را که بخواهید می‌توانید به آن اضافه کنید.