کد – ساخت تایم لاین افقی

امروز تصمیم گرفتیم ساخت تایم لاین افقی رو به شما آموزش بدیم . در تایم لاین افقی شما میتوانید رویداد کاری و شخصی خودتون رو به صورت خیلی زیبا و خوشکل نمایش بدید . پیشنهاد میکنم این مطلب رو از دست ندهید .

ساخت تایم لاین افقی

ساختار HTML

اچ تی ام ال ما دارای دو ساختار اصلی میباشد . یکی تایم لاین ما و دیگری متن و توضیحات رویداد که در زیر آن قرار است نمایش داده شود . یک کلاس ul.cd-timeline-navigation اضافی برای پیکان های جهتی و span.filling-line برای ساخت افکت پر کننده زمانی که یک زمان انتخاب میشود استفاده شده است .

<section class="cd-horizontal-timeline">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events">
            <ol>
               <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
               <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
               <!-- other dates here -->
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
         </div> <!-- .events -->
      </div> <!-- .events-wrapper -->

      <ul class="cd-timeline-navigation">
         <li><a href="#0" class="prev inactive">Prev</a></li>
         <li><a href="#0" class="next">Next</a></li>
      </ul> <!-- .cd-timeline-navigation -->
   </div> <!-- .timeline -->

   <div class="events-content">
      <ol>
         <li class="selected" data-date="16/01/2014">
            <h2>Horizontal Timeline</h2>
            <em>January 16th, 2014</em>
            <p> 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
            </p>
         </li>

         <li data-date="28/02/2014">
            <!-- event description here -->
         </li>

         <!-- other descriptions here -->
      </ol>
   </div> <!-- .events-content -->
</section>

افزودن استایل

4 کلاس برای ایجاد اسلایدر انیمیشن استفاده شده است . کلاس های .enter-right/.enter-left برای انتخاب رویداد و وارد شدن از چپ و راست میباشد .

کلاس های .leave-right/.leave-left برای رویداد ترک آیتم و رفتن از چپ و راست استفاده شده است .

.cd-horizontal-timeline .events-content {
  position: relative;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

در مورد تایم لاین : موقعیت هر تاریخ در طول تایم لاین با استفاده از جی کوئری تنظیم میشود . تاریخ ها به صورت مساوی در طول تایم لاین تقسیم نمیشوند . اول از همه در فایل main.js ما یک حداقل فاصله بین دو تاریخ را مشخص میکنیم . این مقدار در eventsMinDistance ذخیره میشود . در کد ما روی 60 تنظیم شده است . شما میتوانید کدها را دانلود کرده و آن را بررسی و تغییر دهید .

امیدوارم از آموزش ساخت تایم لاین افقی لذت برده باشید . خوشحال میشویم که نظرات خود را با ما در میان بگذارید .

منبع : codyhouse.co