multiScroll.js – Easily create divided multi-scrolling pages

MultiScroll.js is a new jQuery plugin that will allow you to create a split screen multi-scrolling web pages that will make your website stands out.

With multiScroll.js you can create two vertical scrolling panels which can be populated with different content. When users scrolls they will see the how the different panels are devided. You can also set up some options such as adjust the scrolling speed, put fixed header and footer, loop the content and add some easing…

Demo  Download

Here is how to start:

First of all, you need to include the file called jquery.multiscroll.js or the minified version – jquery.multiscroll.min.js. When done you need to add the css file – jquery.multiscroll.css as well as the jQuery library. As an option you can also include jQuery UI library if you want to use other easing effects apart from the ones already included 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.)

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

The 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-righ and ms-left elements.

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

Initializing:

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',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null, 
        keyboardScrolling: true,
        touchSensitivity: 5,

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});

Using anchor links

In order to create links to certain 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.

For more options visit the multiScroll plugin github page – multiscroll.js

Demo  Download