Multi Scrolling Plugin – multiScroll.js

File Size:101.29 KB
Views Total:420
Last Update:April 5, 2018
Publish Date:December 2, 2017
Official Website:Go to website
License:MIT

A simple jquery plugin to create multi scrolling websites with two vertical scrolling panels up and down effect. multiScroll.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12. It works with browsers with CSS3 support and with the ones who don’t have it, making it ideal for old browsers compatibility. It is designed to work as well on touch devices such as mobile phones or tablets.

How to use it:

1. Add js/css link :

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiscroll.js"></script>
<!---- optional --->
<script type="text/javascript" src="vendors/jquery.easings.min.js"></script>

2. Add Html Code

<!-- nav -->
<ul id="menu">
<li data-menuanchor="firstSection"><a href="#firstSection">First slide</a></li>
<li data-menuanchor="second"><a href="#second">Second slide</a></li>
<li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>

<!-- div --->
<div id="myContainer">
<div class="ms-left">
<div class="ms-section" id="left1"> Left 1 </div>
<div class="ms-section" id="left2"> Left 2 </div>
<div class="ms-section" id="left3"> Left 3 </div>
</div>
<div class="ms-right">
<div class="ms-section" id="right1"> Right 1 </div>
<div class="ms-section" id="right2"> Right 2 </div>
<div class="ms-section" id="right3"> Right 3 </div>
</div>
</div>

3. nitialize and setup the plugin via javascript.

<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['firstSection', 'second', 'third'],
menu: '#menu',
navigation: true,
loopBottom: true,
loopTop: true,
});
</script>

4. Available options and supported callback events.

<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
'verticalCentered' : true,
'scrollingSpeed': 700,
'easing': 'easeInQuart',
'menu': true,
'sectionsColor': [],
'anchors':[],
'navigation': false,
'navigationPosition': 'right',
'navigationColor': '#000',
'navigation<a href="http://www.jqueryshare.net/navbar/">Tooltip</a>s': [],
'loopBottom': false,
'loopTop': false,
'css3': false,
'paddingTop': 0,
'paddingBottom': 0,
'normalScrollElements': null, 
'keyboardScrolling': true,
'touchSensitivity': 5,

//events
'afterLoad': null,
'onLeave': null,
'afterRender': null,
'afterResize': null
});
</script>

Done 🙂

 

Change Log

Change Log :

multiScroll 0.1.8

released this on Apr 24 , 2017

  • Added new option: responsiveExpand.
  • Improved documentation

multiscroll.js v.0.1.7

released this on Mar 18, 2015

  • Fixed bug. Navigation bullets get vertically centred now.
  • A class will be added to the body element with the active section anchor / index
  • Improved keyboard accessibility
  • Fixed bug with IE touch devices.

multiscroll.js Beta v.0.1.6

released this on Mar 18, 2015

  • Added new function destroy to destroy the plugin events
  • Added new function build to bind the plugin events.

multiscroll.js Beta v.0.1.5

released this on Jan 5, 2015

multiscroll.js Beta v.0.0.4

released this on May 12, 2014

All Version : Visit  Download