معرفی ۵۰ پلاگین‌ کاربردی jQuery – بخش دوم

معرفی ۵۰ پلاگین‌ کاربردی jQuery – بخش دوم

۵۰ Awesome jQuery Plugins – Part2

 

در مقاله قبل، پلاگین های دیالوگ (Dialog)، فرم (Form)،  پارالاکس و اسکرول صفحه (Parallax & Scroll) را معرفی و بررسی کردیم. در این مقاله، پلاگین های دیگر را معرفی خواهیم کرد.

 

۱۶- پلاگین  Super Scrollorama:

پلاگین super scrollorama یک پلاگین جالب و کاربردی است برای پیاده سازی اسکرول با انیمیشن هایی جذاب.

پلاگین super scrollorama

می توانید دستورات زیر را برای انجام تنظیمات این پلاگین تعریف کنید:

 
$(document).ready(function() {
  var controller = $.superscrollorama();
  controller.addTween('#fade',
    TweenMax.from($('#fade'), .5, {css:{opacity:0}}));
});

 

۱۷- پلاگین Stellar.js:​

پلاگین stellar.js یک پلاگینی در جی کوئری است که توسط آن می توانید اسکرول پارالاکس (Parallax Scrolling) را روی هر المانی پیاده سازی کنید.

پلاگین stellar.js

شما می توانید سرعت اسکرول هر المان را توسط اتریبیوت data تنظیم کنید تا افکت پارالاکس بدرستی پیاده سازی شود. برای فعالسازی این پلاگین، براحتی می توانید مانند زیر، آنرا روی المان ریشه (root) صفحه وب تعریف کنید:

$('#main').stellar();

 

 

۱۸- پلاگین ScrollPath:

پلاگین Scrollpath یکی دیگر از پلاگین های جی کوئری در زمینه اسکرول و پارالاکس می باشد. اما آنچیزی که این پلاگین را از پلاگین های قبلی متمایزمی کند، قابلیت تعیین مسیر اسکرول است.

پلاگین Scrollpath

پلاگین Scrollpath از ساختار canvas برای طراحی مسیر اسکرول استفاده می کند. متدهایی مانند MoveTo و LineTo و Arc . برای مسیریابی راحت تر این امکان وجود دارد که مسیر را مشاهده کنید (مانند تصویر فوق).

 

فهرست پلاگین های جی کوئری افکت های متنی (Text Effects)

پیشرفت های زیادی در زمینه تایپوگرافی (typography) در وب طی سال های اخیر صورت گرفته است. بعنوان مثال، در سالهای نه چندان دور، تنها امکان استفاده از فونت های استانداری مانند arial , Tahoma وجود داشت و نمی توانستیم از فونت های دلخواه (مانند نازنین و رویا و…) در صفحات وب سایت خود بهره ببریم. اما به لطف پیشرفت های مذکور در زمینه تایپوگرافی وب، چند سالی است که این امکان وجود دارد. و توسط css3 می توان این فونت ها را بهبود بخشید.

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

 

۱۹- پلاگین Textillate.js:

پلاگین textillate.js ابزاری است که با ادغام قدرت های animate.css و lettering.js توانسته انیمیشن های زیبایی را به المان های متنی صفحات وب اعمال کند.

پلاگین Textillate.js

AnimateCSS

پایه و اساس این انیمیشن ها CSS3 می باشد که می تواند به متن (TEXT) افکت های جالب و جذابی (حتی در موبایل) اعمال کند.

تعداد زیادی افکت و انیمیشن در پلاگین Textillate.js تعریف شده است که می توان از آنها براحتی و بصورت رایگان استفاده کرد.

 

۲۰- پلاگین Arctext.js:

پلاگین arctext.js امکانی را برای طراحان وب فراهم می کند تا حروف یک متن را بصورت کمان (Arc) حالت دهند. به تصویر زیر نگاه کنید:

پلاگین arctext.js

بر اساس پلاگین lettering.js می باشد و radius مناسب را برای هر یک از حروف محاسبه می کند و در نهایت استایل های css3 را روی آنها اعمال می کند.

 

۲۱- پلاگین Bacon:

توسط پلاگین Bacon می توانید متون موردنظر را در اطراف یک تصویر خمیده و یا یک خط چیدمان کرد. برای روشن شدن قضیه، به تصویر زیر دقت کنید:

 پلاگین Bacon

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

 

۲۲- پلاگین Lettering.js:

پلاگین lettering.js ابزاری است ساده اما کاربردی و موثر در زمینه تایپوگرافی وب. کاری که این پلاگین انجام می دهد بطور کلی بدین صورت است که هر کاراکتر از یک رشته را جدا می کند و روی هر کدام از آنها می توان بطور مجزا افکت های موردنظر را اعمال کنیم و برای هریک استایل های مشخصی تعریف کنیم.

پلاگین Lettering.js

 

۲۳- پلاگین jQuery Shuffle Letters:

پلاگین jQuery Shuffle Letters یکی از ابزارهایی است که توسط برنامه نویسان وب سایت tutorialzine.com طراحی شده است. همانطور که از نامش مشخص است، حروف یک کلمه و یا عبارت را بصورت تصادفی بهم می ریزد و سپس بترتیب آنها را در کنار همدیگر می چیند.

در تصویر نمونه زیر، عبارت Welcome to Mohtava.info را تست کردیم:

پلاگین jQuery Shuffle Letters

پلاگین jQuery Shuffle Letters

با تعریف اسکریپت زیر، می توان از این پلاگین در صفحه وب خود استفاده کنید:

 
// Shuffle the container with custom text
$('h1').shuffleLetters({
    "text": "show this text!" // optional
});

نکته: پارامتر text در اسکریپت فوق اختیاری است و در صورت تعریف نشدن، پلاگین محتوای المان (در این مثال h1) را بجای آن در نظر می گیرد.

 

۲۴- پلاگین FitText.js:

پلاگین FitText.js این امکان را به طراحان وب می دهد تا کلمه یا عبارت موردنظر را در container آن بصورت full width نمایش دهد و در تمام اسکرین ها مانند تبلت و موبایل نیز تمام صفحه باشد.

پلاگین FitText.js

متونی که با توسط این پلاگین در container خود fit شده اند در تمام نمایشگرها ریسپانسیو خواهند بود.

 

فهرست پلاگین های جی کوئری گریدها (Grids):

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

 

۲۵- پلاگین Gridster.js:

پلاگین gridster.js امکان ایجاد ستون ها و گریدهای با قابلیت drag یا draggable را برای طراحان فراهم می کند. حتی می توان بصورت داینامیک، گریدی را حذف و یا اضافه کرد.

پلاگین Gridster.js

 این پلاگین برای پروژه هایی مانند داشبورد (Dashboard) مفید می باشد.

 

پلاگین gridster.js

 

۲۶- پلاگین Freetile:

پلاگین freetile ابزاریست که توسط آن می توان چیدمان المان های وب سایت را به گونه ای زیبا و منعطف و ریسپانسیو انجام داد.

پلاگین Freetile

روش کار این پلاگین بطور کلی بدین صورت است که باید آن را روی container اعمال کنیم. خود پلاگین بقیه کارها را انجام می دهد. یعنی المان های داخل آن container را طوری چیدمان می کند که از فضای موجود بهترین استفاده را ببرد (استفاده بهینه از فضا:optimal use of space)

 

۲۷- پلاگین Stalactite:

پلاگین Stalactite یک کتابخانه از جی کوئری است که محتویات صفحه وب را بر اساس فضای موجود، فشرده (pack) می کند و از متد Lazy Loading استفاده می کند.

پلاگین Stalactite

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

 

فهرست پلاگین های جی کوئری نوار اسکرول سفارشی (Custom Scrollbar)

یکی از مواردی که اکثر طراحان وب مایلند تغییر دهند، دیزاین اسکرول بار پیش فرض مرورگرها می باشد. برخی از مرورگرها اجازه این تغییر را می دهند و برخی دیگر خیر. با دو پلاگینی که در زیر معرفی می کنیم، امکان تغییر در ظاهر نوار اسکرول را در تمام مرورگرها خواهیم داشت.

 

۲۸- پلاگین nanoScroller.js:

پلاگین nanoScroller.js امکانی را برای طراحان وب فراهم می کند تا بتوانند دیزاین اسکرول پیش فرض مرورگرها را شبیه Mac OS طراحی کنند.

پلاگین nanoScroller.js

این پلاگین، از زبان نشانه گذاری minimal HTML و اسکرول پیش فرض مرورگرها بهره می برد. اسکرولی که توسط پلاگین nanoScroller ایجاد می شود در دستگاه های iPad و iPhone و تبلت های اندروید نیز قابل استفاده و مشاهده است.

 

 

۲۹- پلاگین Custom Content Scroller:

پلاگین Custom Content Scroller یک پلاگین سفارشی سازی scrollbar می باشد که بطور کامل توسط css قابل طراحی و شخصی سازی می باشد. به دو صورت افقی (horizontal) و عمودی (vertical) قابل استفاده است و با بهره بردن از پلاگین mousewheel امکان استفاده از Mouse wheel را نیز دارد.

پلاگین Custom Content Scroller

پلاگین فوق دارای ویژگی های نظیر: دکمه اسکرول (Scrolling Button)، افکت easing، تعیین اندازه طول اسکرول بصورت اتوماتیک، نوار اسکرول تو در تو (Nested Scrollbar) و… می باشد.

در مقاله بعد، که آخرین بخش از سری آموزشی "معرفی ۵۰ پلاگین برتر جی کوئری" می باشد، پلاگین های دیگری را معرفی و بررسی می کنیم…


برچسب‌ها:

پلاگین Parallaxپلاگین Scrollpathپلاگین stellar.jsپلاگین super scrolloramaپلاگین اسکرولپلاگین پارالاکسپلاگین جی کوئرینوار اسکرول سفارشی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 + ده =