multiScroll.js

preview compatibility

| 3.7Kb gziped | Created by @imac2

A simple plugin to create multi scrolling websites with two vertical scrolling panels.

Invite me to a coffee

Customizations of the plugin available upon request for some reasonable price. <a href="https://alvarotrigo.com/#contact-page">Contact me</a>.

Introduction

This plugin its in Beta version. Suggestion are more than welcome, not only for feature requests but also for coding style improvements.

Compatibility

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.

License

Commercial license

If you want to use multiScroll.js to develop commercial websites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. [Purchase a multiScroll.js Commercial License]

Non commercial license

If you are creating non commercial pages, you can use it without a license. Bare in mind all companies websites are considered commercial, ncluding non profit organisations websites.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Usage

As you can see in the example files, you will need to include the JavaScript file jquery.multiscroll.js (or the minified version jquery.multiscroll.min.js) and the css file jquery.multiscroll.css of the plugin, as well as jQuery. Optionally, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library which are the linear or swing effects. (easeInQuart is active by default, so you would need jQuery UI library or the customized version which is included in the vendors folder under the name jquery.easings.min.js.)

Install using bower or npm

Optionally, you can install multiscroll.js with bower or npm if you prefer: Terminal:

// With bower
bower install multiscroll.js

// With npm
npm install multiscroll.js

Including files:

<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 multiScroll option css3:false and using a non default value for the option `easingcss3`. 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>

Optional use of CDN

If you prefer to use a CDN to load the needed files, multiscroll.js is in CDNJS and others:

https://cdnjs.com/libraries/multiscroll.js
https://unpkg.com/multiscroll.js

Required HTML structure

Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page.

<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>

If you want to define a different starting point rather than the first section, just add the class active to the section you want to show on load. This should be done for the ms-right and ms-left elements.

<div class="ms-section active">Some section</div>

Initialization

All you need to do is call the plugin inside a $(document).ready function:

$(document).ready(function() {
	$('#multiscroll').multiscroll();
});

A more complex initialization with all options set could look like this:

$(document).ready(function() {
	$('#multiscroll').multiscroll({
		verticalCentered : true,
		scrollingSpeed: 700,
		easing: 'easeInQuart',
		easingcss3: 'ease-out',
		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(){},
	});
});

Creating links to sections

If you are using multiscroll.js with anchor links for the sections (using the anchors option), then you will be able to use anchor links also to navigate directly to a certain section by using the URL.

You can do it by creating accessing to the URL by adding the anchor. For example: http://youriste.com/#secondSection.

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).

You can also use the menu option and make use of anchor links (#) as explained below in the options section.

State classes added by multiScroll.js

multiScroll.js adds multiple classes in different elements to keep a record of the status of the site:

active is added the current visible section.
active is added to the current menu element (if using the menu option).
A class of the form ms-viewing-SECTION is added to the body element of the site. (eg: ms-viewing-second The SECTION part will be the anchors (or index if no anchor is provided) of the current section.
ms-responsive is added to the body element when the entering in the responsive mode

Use extensions

multiscroll.js provides a set of extensions you can use to enhance its default features. All of them are listed as multiscroll.js options.

Extensions requires you to use the minified file jquery.multiscroll.extensions.min.js that is inside the dist folder instead of the usual multiscroll.js file (jquery.multiscroll.js or jquery.multiscroll.min.js).

Once you adquire the extension file, you will need to add it before multiscroll. For example, if I

Multiscroll.js

Install / Use

README