مجله خبری هاست ایران » طراحی و توسعه » بهترین پلاگین‌های رایگان جاوا اسکریپت در سال ۲۰۱۸
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

بهترین پلاگین‌های رایگان جاوا اسکریپت در سال ۲۰۱۸

بهترین پلاگین‌های رایگان جاوا اسکریپت در ۲۰۱۸

یک توسعه‌دهنده خوب بودن فقط به معنی درست کردن محصولات خوب نیست بلکه به معنی به‌روز بودن و پیشرفت همگام با تغییرات نیز هست. ولی بدین معنی نیست که شما باید در هر کنفرانس، جلسه و رویداد شرکت کنید یا با هر تکنیک جدیدی کار کنید. جامعه توسعه‌دهندگان هر روز ایده‌های جالب و جدید ارائه می‌دهند، حال می‌تواند این ایده یک مفهوم جدید در Codepen یا fork در گیت هاب باشد.

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

Moon.js

Moon.js

Moon.js  کتابخانه کوچکی که حجم کمپرس شده‌اش تنها ۷ کیلوبایت است، مخصوص نمونه‌های اولیه رابط‌های کاربری (Prototype Interface) ساخته‌شده است. همانند Vue یا React یک سیستم component دارد که شما می‌توانید در زمان کوتاهی رابط کاربری (UI) طراحی کنید.


مقاله مرتبط: Vue.js چیست و چه مزایایی دارد؟


Tippy.js

Tippy.js

هدف Tippy.js بهبود بخش اطلاعاتی پروژه با فراهم کردن نشانه‌های ساده است. راهنمایی‌ها (Tooltips) را می‌سازد و اضافه می‌کند. گزینه‌های زیادی برای سفارشی کردن دارد، شما می‌توانید محل، فلش، انیمیشن و حتی تم را مشخص کنید.

Modaal

Modaal

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

Datedropper

Datedropper

اگر به دنبال یک تقویم زیبا و چندکاره برای پروژه‌تان هستید  می‌توانید Datedropper را در نظر بگیرید. اگرچه در سال ۲۰۱۵ ساخته‌شده، ولی در طی این مدت بهبودیافته تا تبدیل به یک کتابخانه ضروری jQuery برای طراحی تقویم رابط‌های کاربری شود.

تقریباً تمام جنبه‌های رابط کاربری می‌تواند با کمک پلاگین‌ها به‌راحتی انجام شود. حال می‌تواند یک ناوبری کشویی (slide-out navigation) معمولی باشد که به‌راحتی با کمک Canvi ساخته شده و یا یک مجموعه از نمودارها که به‌راحتی می‌تواند توسط Billboard.js یا Markvis درست شود که تمام ابزار لازم برای نمایش داده‌ها و ساخت سریع و بی‌دردسر آن‌ها را دارد، باشد.

Canvi

Canvi

Billboard.js

Billboard.js

Markvis

Markvis

پلاگین‌های بعدی Fitty و MediumLightbox هستند.

Fitty یک‌راه حل برای جا دادن یک متن درجایی مشخص است و MediumLightbox یک جایگزین ساده‌شده برای lightbox مشهور است که قابلیت زوم کردن در عکس‌ها را اضافه می‌کند.

Fitty

Fitty

MediumLightbox

MediumLightbox

یکی از مهم‌ترین ویژگی‌های رابط‌های کاربری مدرن، پنل‌های چسبنده (sticky panels) است. تقریباً تمام وب‌سایت‌ها از جابجایی‌های چسبنده استفاده می‌کنند تا برای بازدیدکنندگان خود، راه‌های بیشتری برای ناوبری فراهم کنند. می‌تواند به شکل دکمه «برو به بالا صفحه» یا منو اصلی باشد. اگر می‌خواهیداز همچنین چیزی در پروژه‌تان استفاده کنید، سری به StickyBits یا Sticky Sidebar بزنید.

StickyBits

StickyBits

Sticky Sidebar

Sticky Sidebar

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

اضافه کردن سرگرمی

تنها بخش عملی و ظاهری برای ساخت یک وب‌سایت کافی نیست. وب‌سایت‌های مدرن، عوامل سرگرمی را نیز در درون خود دارند. طراحی سایت به چیزی نیاز دارد که تجربه کاربر را غنی کند و اکتشاف و جستجو در پروژه را لذت‌بخش نماید. اولین و معروف‌ترین انتخاب، تعامل‌های کوچک (micro-interactions) است که تجربه کاربر را از زوایای مختلف بهبود می‌بخشد. ما استفاده از Micron و AnimatePlus را پیشنهاد می‌کنیم. Micron دقیقاً برای انجام چنین کارهایی است. این کتابخانه جاوا اسکریپت شامل مجموعه‌ای از تعامل‌های کوچک است که به‌راحتی می‌توانند به عناصر DOM با استفاده از ویژگی‌های خاصی اضافه شوند.

Micron

Micron

AnimatePlus یک کتابخانه سبک برای تنظیم عناصر HTML یا SVG برای حرکت کردن است. شما می‌توانید سرعت، تأخیر، مدت‌زمان، حلقه و عوامل زیاد دیگری را کنترل کنید.

AnimatePlus

AnimatePlus

اگر فقط می‌خواهید رابط کاربری را با یک ویژگی زیبا بخش بهتر کنید، بهتر است از Moving Letters، PixelWave، Blotter.js و Bubbly Bg استفاده کنید.

Moving Letters

Moving Letters

شاید بیانش به نظر بدیهی برسد، ولی Moving Letters برای به حرکت درآوردن حروف است. این یک مجموعه کوچک است که توسط Tobias Ahlin ساخته‌شده و راه‌های مختلفی را برای استفاده از تایپوگرافی ایجاد کرده است. هر انیمیشن با یک قطعه کد همراه است که شما می‌توانید به‌راحتی در پروژه‌تان از آن استفاده کنید.

Blotter.js

Blotter.js

همانند مثال قبل، Blotter.js برای ایجاد تغییرات در متن است.

PixelWave

PixelWave

PixelWave برای ساخت انیمیشن جابجایی بین صفحات و اسلایدها است.

Bubbly Bg

Bubbly Bg

Bubbly.bg برای ساخت یک صفحه با حباب‌های زیبا و متنوع است.

CSS Doodle

CSS Doodle

تغییرات ظاهری قبلی که گفتیم زیبا هستند ولی کوچک و کوتاه‌اند. اگر به دنبال راه‌های بیشتری برای تحت تأثیر قرار دادن بازدیدکنندگانتان می‌گردید، بهتر است به CSS Doodle، Draggable و Pts.js نگاهی بیندازید.

این پلاگین‌ها در دسته‌بندی‌های مختلفی قرار می‌گیرند ولی ویژگی مشترکی دارند، آن‌هم اینکه می‌توانند تأثیر زیادی بر رابط کاربری بگذارند.

CSS Doodle یک component وب است که به شما اجازه می‌دهد الگوهای مختلفی را فقط با CSS ایجاد کنید.

Draggable

Draggable

Draggable یک کتابخانه سبک است که برای اضافه کردن قابلیت کشیدن و انداختن (drag-and-drop) به پروژه شما است. این کتابخانه تضمین می‌کند که به‌راحتی قابل دسترسی، قابل مرتب شدن، قابل تعویض و قابل‌انعطاف باشد.

Pts.js

Pts.js

در Pts.js نقطه یک بلاک پایه ساختمان است که شما برای ساختن مجموعه‌ای از نقاط به بقیه متصل می‌شوید. از آن برای ساختن شاهکارهای مبتنی بر ذره (particle-based) استفاده کنید.

Emergence.js

Emergence.js

آخرین ابزاری که موردتوجه باید قرار بدهید، Emergence.js است. برخلاف پلاگین‌های قبلی که راه‌حل‌های آماده هستند، Emergence.js یک ابزار منعطف است که فقط یک‌پایه برای آزمایش کردن را برایتان فراهم می‌کند که برای داستان‌سرایی (storytelling) یا صفحات مبتنی بر اسکرول (scroll-based) مناسب است. هدفش پیدا کردن آشکاری برخی از عناصر خاص در مرورگر و دادن آزادی عمل به شما در تغییرات این عناصر است.

نتیجه‌گیری

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

کدام‌یک از پلاگین‌ها بیشتر برای شما جذاب بود؟

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه