آیکون های متحرک

فالکون از Lottie Web برای آیکون های متحرک استفاده می کند. وب Lottie انیمیشن های After Effects را به صورت بومی در وب، اندروید و iOS و React Native رندر می کند.

مستندات لوتی
جاوا اسکریپت
<script src="vendors/lottie/lottie.min.js"></script>
مثال

می توانید رنگ ها، مدت زمان انیمیشن و موارد دیگر را از این ویرایشگر عالی به روز کنید.

ویرایشگر Lottie 
<div class="row align-items-center">
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/check-primary-light.json"}'></div>
  </div>
  <div class="col-lg-4 mt-5 mt-lg-0">
    <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/warning-light.json"}'></div>
  </div>
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/heart.json"}'></div>
  </div>
</div>
بارگذاری مثال انیمیشن
دریافت انیمیشن های بیشتر 
<div class="row align-items-center">
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/infinite-loop.json"}'></div>
  </div>
  <div class="col-lg-4 mt-5 mt-lg-0">
    <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/loading-square.json"}'></div>
  </div>
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/loading.json"}'></div>
  </div>
</div>
نمونه انیمیشن برجسته
دریافت انیمیشن های بیشتر 
<div class="row align-items-center">
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/shopping-list.json"}'></div>
  </div>
  <div class="col-lg-4 mt-5 mt-lg-0">
    <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/sleeping-404.json"}'></div>
  </div>
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/star-feedback.json"}'></div>
  </div>
</div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما
چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال
موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید

سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی