در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور از افزونه MultiScrolling برای ساخت اسکرول چندتایی در وبسایت استفاده کنیم..
افزونه Multi Scrolling، یک پلاگین ساده برای اسکرول چندتایی در سایت هایی است که از نظر عمودی به دو پنل مجزا تقسیم می شوند. این پلاگین هم با مرورگرهایی که css3 را پشتیبانی می کنند و هم آنهایی که قدیمی تر هستند و همچنین ابزارهای لمسی مانند موبایل و تبلت سازگار است.
جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده می کنید می توانید jquery UI را نیز استفاده کنید. برای نصب پلاگین multiScroll توسط ترمینال می توانید دستور زیر را در مکانی که می خواهیدنصب شود، فراخوانی کنید.
// With bower bower install multiscroll.js // With npm npm install multiscroll.js
لینک هایی که لازم است در پروژه قرار دهید به شرح زیر هستند :
< link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" / > < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script > < !-- This following line is needed in case of using the default easing option or when using another one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -- > < script src="vendors/jquery.easings.min.js" >< /script > < script type="text/javascript" src="jquery.multiscroll.js" >< /script >
اگر می خواهید پلاگین را دانلود کنید،روی لینک زیر را کلیک کنید :
CDNJS: https://cdnjs.com/libraries/multiscroll.js
هر بخش توسط یک عنصر div با کلاس section مشخص می شود. بخش اول که صفحه نخست سایت محسوب می شود، به صورت پیش فرض فعال است.
< div id="multiscroll" > < div class="ms-left" > < div class="ms-section" >Some section< /div > < div class="ms-section" >Some section< /div > < div class="ms-section" >Some section< /div > < /div > < div class="ms-right" > < div class="ms-section" >Some section< /div > < div class="ms-section" >Some section< /div > < div class="ms-section" >Some section< /div > < /div > < /div >
جهت فعال کردن یک بخش در زمان بار گزاری صفحه، می توانید از کد زیر استفاده کنید.
< div class="ms-section active" >Some section< /div >
برای فراخوانی پلاگین در JQuery، دستور زیر را درون script می نویسیم.
$ (document).ready(function() { $ ('#multiscroll').multiscroll(); });
تمام گزینه های این پلاگین در قطعه کد زیر موجود است :
$ (document).ready(function() { $ ('#multiscroll').multiscroll({ verticalCentered : true, scrollingSpeed: 700, easing: 'easeInQuart', menu: false, sectionsColor: [], navigation: false, navigationPosition: 'right', navigationColor: '#000', navigationTooltips: [], loopBottom: false, loopTop: false, css3: false, paddingTop: 0, paddingBottom: 0, normalScrollElements: null, scrollOverflow: false, scrollOverflowOptions: null, keyboardScrolling: true, touchSensitivity: 5, //responsive responsiveWidth: 0, responsiveHeight: 0, responsiveExpand: false, // Custom selectors sectionSelector: '.ms-section', leftSelector: '.ms-left', rightSelector: '.ms-right', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, }); });
$ ('#pagepiling').pagepiling({ sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], });
(normalScrollElements: '#element1, .element2')
متد moveSectionUp() : اسکرول به سمت بالا یک بخش.
$ .fn.pagepiling.moveSectionUp();
متد moveSectionDown() : اسکرول یک بخش به سمت پایین.
$ .fn.pagepiling.moveSectionDown();
متد moveTo(section) : اسکرول صفحه به بخش مشخص شده.
/*Scrolling to the section with the anchor link `firstSection` */ $ .fn.pagepiling.moveTo('firstSection'); //Scrolling to the 3rd section in the site $ .fn.pagepiling.moveTo(3); //Which is the same as $ .fn.pagepiling.moveTo(3);
متد setAllowScrolling(boolean) : حذف امکان اسکرول بین بخش توسط موس یا حالت لمسی.
$ .fn.pagepiling.setAllowScrolling(false);
متد setKeyboardScrolling(boolean) : افزودن یا حذف امکان اسکرول بین بخش توسط دکمه های کیبورد.
$ .fn.pagepiling.setKeyboardScrolling(false);
متد setScrollingSpeed(milliseconds) : سرعت اسکرول برحسب میلی ثانیه.
$ .fn.pagepiling.setScrollingSpeed(700);
با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..