انیمیشن های بارگیری برای وب سایت های وردپرسی (Loading Animation)

کاربران همیشه عجله دارند و وب سایتی که بارگیری آن بیش از ۲ یا ۳ ثانیه طول بکشد وب سایت کندی تلقی می شود، خوشبختانه راهی وجود دارد که می توان با استفاده از آن کاربران را مدت زمان بیشتری در سایت نگه داشت. این راه استفاده از انیمیشن های بار گذاری در سایت می باشد که در این مقاله ۱۰ مورد از این انیمیشن ها را به شما معرفی می کنیم.

نویسنده سید علی اندرزگو

انیمیشن های بارگیری برای وب سایت های وردپرسی (Loading Animation)

کاربران همیشه عجله دارند و وب سایتی که بارگیری آن بیش از ۲ یا ۳ ثانیه طول بکشد وب سایت کندی تلقی می شود، خوشبختانه راهی وجود دارد که می توان با استفاده از آن کاربران را مدت زمان بیشتری در سایت نگه داشت. این راه استفاده از انیمیشن های بار گذاری در سایت می باشد که در این مقاله ۱۰ مورد از این انیمیشن ها را به شما معرفی می کنیم.

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

انیمیشن بارگیری؟

انیمیشن بارگذاری که لودر نیز نامیده می شود، انیمیشنی چشم نواز است که در وب سایتی به کار می رود که تا حدودی طولانی باشد و به جهت بارگذاری همه عناصر نمایش داده می شود. برخی از انیمیشن های بارگیری کوتاه هستند و نیازی به توجه کاربر برای مدت طولانی ندارند. اما در برخی موارد اگر سایت خیلی بزرگ باشد، انیمیشن بارگذاری باید واقعاً فریبنده باشد تا کاربر را جذب کند.

انیمیشن های بارگذاری از دهه ۹۰ به بعد ظاهر شدند، در اوایل عصر اینترنت انیمیشن های بارگیری داشتیم. البته در آن زمان آنها خیلی کندتر از آنچه که امروزه وجود دارند بودند.

آشنایی با بارگذار ی انیمیشن ها

رایج ترین سبک بارگذاری انیمیشن ها دایره چرخان است. با دایره رنگین کمان مرگ کامپیوترهای های اپل اشتباه گرفته نشود. انیمیشن بارگذاری دایره چران شیب حرکتی مبهمی دارد. اولین پیش لودرهای چرخشی نسخه های مختلف زیادی داشتند، از گل گرفته تا دایره های برفی و حتی نخ های یانگ نخ ریسی. امروزه انیمیشن های بارگذاری در حال پویا و زیباتر شدن هستند.

انیمیشن بارگذاری چرخان فقط در صورتی کار می کنند که مدت زمان انتظار کوتاه باشد. بیش از ۵ ثانیه در حال حاضر خیلی زیاد است. این زمانی است که توسعه دهندگان باید از لودرهای پیش خلاقانه تر استفاده کنند. یک انیمیشن بارگیری سرگرم کننده بدون توجه به مدت زمان طولانی کاربر را در سایت نگه می دارد.

نکاتی برای بارگذاری بهتر انیمیشن ها

چند نکته وجود دارد که می توانید آن را به یک انیمیشن جالب توجه خود اضافه کنید. در اینجا چند نکته برای بهتر و موثرتر کردن آنها ذکر می کنیم.

  • نوار درصد برای آن درج کنید
  • نمایش دادن اینکه که کاربر چه مدت باید منتظر بماند
  • توضیح دهید که چه اتفاقی در زیر کاپوت در حال رخ دادن است (بهتر است به صورت طنز باشد)
  • از یک انیمیشن سرگرم کننده استفاده کنید که لزوماً یک عمل دقیق دقیق را تکرار نمی کند.

مزایای یک انیمیشن در حال بار کردن

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

چگونه یک انیمیشن در حال بارگیری را به سایت وردپرس خود اضافه کنیم؟

اضافه کردن انیمیشن بارگیری آسانتر از آن چیزی است که فکر می کنید، چندین گزینه در مورد چگونگی افزودن یک انیمیشن به سایت وردپرس وجود دارد. از افزونه های آسان گرفته تا اضافه کردن کد دلخواه به سایت. از آنجا که انتخاب های مختلف زیادی وجود دارد، من آنها را در اینجا لیست خواهم کرد تا بتوانید نگاهی به آن ها بیاندازید و دریابید که کدام مورد برای شما مناسب تر است.

استفاده از افزونه برای اضافه کردن یک انیمیشن در حال بارگیری

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

این افزونه ها عبارتند از:

Loftloader

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

Flat Preloader

Flat Preloader یک افزونه ساده، رایگان با مجموعه محدود انیمیشن های بارگذاری رنگارنگ است. اگر به یک اصلاح سریع برای پیش لودر نیاز دارید این افزونه مناسب است و نیازی به سفارشی کردن رنگ ها یا تصویر نیست.

Best Preloader

Best Preloader یک افزونه بارگیری رایگان با یک گزینه برای انیمیشن است که با هر سبک وب سایتی متناسب است. با یک انیمیشن همراه با برخی از کنترل های customizatio همراه است.

Page Loader

Page Loader یک افزونه برتر بارگذاری انیمیشن است که گزینه های سفارشی سازی و مارک گذاری زیادی دارد. این یکی از پلاگین های مورد علاقه قبل لودر در بازار است.

WP Smart Preloader

WP Smart Preloader یک افزونه رایگان و منبع باز با گزینه های سفارشی سازی کامل است. انیمیشن ها بسیار پیچیده نیستند اما با هر سبکی از وب سایت مطابقت دارند. شما می توانید رنگ ها و تنظیمات را به راحتی سفارشی کنید.

اضافه کردن یک انیمیشن در حال بارگیری بدون پلاگین

اگر می خواهید از افزونه استفاده کنید تعدادی افزونه ی رایگان برای استفاده از انیمیشن های بارگیر وجود دارد. و همچنین برخی آموزشهای پیشرفته که قطعه کد موردنیاز برای اضافه کردن را ارائه می دهد.

مصاحبه با چند رسانه‌ای:

سایت Multimedia یک آموزش ساده با دو مجموعه رایگان انیمیشن بارگیری از PixelBuddha و کد مورد نیاز برای تنظیم آنها در سایت خود منتشر کرده است.

CodePen:

این مقاله متوسط توسط UX Planet ایجاد شده که نویسنده انیمیشن های بارگذاری زیادی را در استایل های مختلف است. موارد ساده و پیچیده تری وجود دارد. بیشتر آنها از CodePen جاسازی شده اند و می توانید قطعه HTML و CSS را از ویجت خود دریافت کنید. برای تنظیم انیمیشن بارگذاری ، باید این موارد را در یک کد کامل وارد کنید.

SpinKit:

Tobias Ashlink دارای SpinKit با مجموعه ای خوب از انیمیشن های بارگیری با کد موجود از طریق GitHub. همچنین برای تنظیم پیش لودر اینها باید به یک کد کامل اضافه شوند.

Loading.io:

Loading.io مجموعه ای از انیمیشن های بارگذاری با گزینه های مختلف است. تعداد لودرهای CSS قبل، بارگیری GIF، دکمه ها و موارد دیگر وجود دارد. از طریق سایت آنها جستجو کنید تا تمام گزینه ها و دستورالعمل های افزودن آنها به سایت خود را پیدا کنید.

Pixelvars:

Pixelvars با همه کدی که برای تنظیم انیمیشن بارگذاری خود نیاز دارید، یک آموزش مفید ایجاد کرده. حتی می توانید از کد آنها به همراه انیمیشن های CodePen یا GitHub در بالا استفاده کنید. این گزینه برای برخی افراد کمی پیشرفته تر به نظر می رسد. اگر یک برنامه نویس با دانش برنامه نویسی خوب هستید با این کار پیش بروید.

با گزینه‌های زیادی که وجود ارد، کدام یک از گزینه‌ها را انتخاب می‌کنید؟

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

در این پست روشهای مختلفی را برای اضافه کردن انیمیشن بارگذاری به سایت خود به شما نشان دادیم. روش مورد نظر شما کدام یک است؟ سفارشی طراحی شده و با کد اضافه شده؟ یک افزونه قابل تنظیم؟ یک گزینه ساده و بدون پیچیدگی؟ امیدوارم بهترین مورد را انتخاب کنید.

کتابخانه های و ابزارهای فیلتر تصویری سی اس اس (CSS Image Filter Libraries & Tools)

منبع

دانلود قالب شرکتی meteor

دانلود قالب شرکتی meteor

نویسنده سید علی اندرزگو

دانلود قالب شرکتی travelify

دانلود قالب شرکتی travelify

نویسنده سید علی اندرزگو

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.