افزودن انیمیشن‌های حرفه‌ای به وبسایت با LottieFiles

اگه دنبال راهی هستی که به سایتت یه ظاهر جذاب‌تر و حرفه‌ای‌تر بدی، انیمیشن‌ها یکی از بهترین گزینه‌ها هستن. یکی از منابع فوق‌العاده برای این کار سایت LottieFiles هست. توی این سایت می‌تونی هزاران انیمیشن آماده پیدا کنی و خیلی راحت اونا رو داخل پروژه‌هات استفاده کنی.

پیدا کردن انیمیشن در LottieFiles

کافیه وارد سایت بشی و از بخش Search Animations هر چیزی که می‌خوای رو سرچ کنی. مثلاً:

با سرچ کلمه loading کلی انیمیشن لودینگ برات میاره.

با سرچ computer انیمیشن‌های مربوط به کامپیوتر نمایش داده میشه.

خیلی از سایت‌هایی که دیدی دقیقاً همین انیمیشن‌ها رو از همین منبع گرفتن.

شخصی‌سازی انیمیشن‌ها

یکی از قابلیت‌های جذاب سایت اینه که می‌تونی انیمیشن رو قبل از دانلود ویرایش کنی.

مثلاً:

تغییر رنگ‌ها

حذف یا اضافه کردن بعضی اجزا

تغییر بخش‌های مختلف برای هماهنگی بیشتر با طراحی سایتت

دانلود فایل انیمیشن

بعد از انتخاب انیمیشن، می‌تونی فایل JSON اون رو دانلود کنی. این فایل همون چیزیه که بعداً داخل صفحه وب لود میشه.

استفاده از Lottie Player

برای نمایش انیمیشن‌ها باید از کتابخونه Lottie Player استفاده کنی. این کتابخونه اوپن سورسه و توی گیتهاب هم در دسترسه.

با اضافه کردنش به پروژه‌ت می‌تونی:

فایل JSON دانلود شده رو به صفحه اضافه کنی.

کنترل کنی انیمیشن لوپ بشه یا فقط یه بار اجرا بشه.

سرعت، سایز و استایل انیمیشن رو تغییر بدی.

حتی با جاوااسکریپت تنظیمات پیشرفته‌تری داشته باشی.

نتیجه‌گیری

سایت LottieFiles یه منبع عالیه برای پیدا کردن انیمیشن‌های آماده و استفاده‌شون توی وب‌سایت‌ها. خیلی راحت میشه این انیمیشن‌ها رو دانلود کرد، ویرایش کرد و با کتابخونه Lottie Player به پروژه اضافه کرد. این کار باعث میشه سایتت جذاب‌تر و حرفه‌ای‌تر به نظر برسه.

برای آموزش کامل‌تر و دیدن جزئیات بیشتر، پیشنهاد می‌کنم ویدیوی این صفحه رو ببینید.

راهنمای رایگان · ۳ دقیقه

از کدام دوره شروع کنم؟

با چند سؤال کوتاه، مسیر و دورهٔ مناسب خودت را پیدا کن.

امیرحسین نائی
برنامه‌نویس، علاقه‌مند به بیزینس
  • موسس آکادمی برنامه‌نویسی نائی
  • بنیان‌گذار کدبزن، روتین آپ، EveryAPI، دستیار بیزینس و...
  • نویسنده‌ی کتاب پرفروش «برنامه‌نویسی رو از اینجا شروع کن!»
  • بیش از 10 سال تجربه در برنامه‌نویسی و راه‌اندازی کسب‌وکار
  • تولیدکننده‌ی ۱۰۰+ ساعت ویدیوی آموزشی رایگان
آموزش برنامه‌نویسی وب

قدم‌به‌قدم، وب‌سایت بساز

مسیر یادگیری طراحی و برنامه‌نویسی وب را با پروژه پیش ببر.

سایر مطالب

هوش مصنوعی جای برنامه نویسان رو میگیره؟
مقاله آموزشی

هوش مصنوعی جای برنامه نویسان رو میگیره؟

با ظهور پرسروصدای هوش مصنوعی و ابزار های حرفه ای این حوزه مثل chatgpt بسیاری از دوستانی که علاقمند به برنامه نویسی هستند و بتازگی یادگیری این حوزه رو شروع کردند نگران شدند که «نکنه هوش مصنوعی جای مارو بگیره و برنامه نویسان رو بیکار کنه؟» این سوالی است که در چند سال اخیر به مراتب از من پرسیده میشه و به همین خاطر تصمیم گرفتم امروز اینجا یکبار برای همیشه درباره اش صحبت کنم. نکته ای که قبل از شروع باید بهش اشاره کنم اینه که هیچ کس درباره اینده خبر نداره و من هم پیشگو نیستم و نمیتونم آینده رو ببین...

ادامه مطلب
فرانت اند، بک اند و فول استک یعنی چی؟
مقاله ویدیویی

فرانت اند، بک اند و فول استک یعنی چی؟

حتما موقع شروع برنامه نویسی وب کلمات فرانت اند، بک اند و فول استک به گوشت خورده. توی این مطلب میخواییم درباره این سه مورد صحبت کنیم و تفاوت های آنها رو بررسی کنیم. هر وبسایتی از دو بخش فرانت اند و بک اند تشکیل شده هر کدام از این دو مربوط به بخش های مختلفی هستند و برنامه نویسی خاص خود را دارند: برنامه نویسی فرانت یعنی چی؟ هرچیزی که در ظاهر یک سایت میبینی مربوط به بخش فرانت انده؛ تصاویر، منوها، عنوان ها و متن ها و... مربوط به بخش فرانت اند است و توسط برنامه نویس فرانت اند کدنویسی شده. برای مثال...

ادامه مطلب