درخواست پیش فاکتور

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

  • ۹ شهریور ۱۳۹۷
  • 88 نفر
  • بدون دیدگاه
  • مجید عابد
 
1 Star2 Stars3 Stars4 Stars5 Stars

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

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

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

 

ساختار HTML

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

 

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

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

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

 

 

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

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

منبع : codyhouse.co

 

دکتر رنک لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme