multiScroll.js: create split scrolling sites [jQuery]

Alvaro Trigo

Updated on: February 08, 2024

Although there are many jQuery plugins out there, there’s space for more yet!
This time I found a couple of sites using this new kind of multi-directional scroll and as didn’t find any script to do it, I decided to make it by my own.

Some sites using this kind of navigation are:

http://www.reverzo.tymberry.com/
http://www.skodayeti.pl
http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home
http://wandaprint.com/home/

multiScroll.js is the name I chose for this plugin. Its aim is to facilitate the creation of multi-scrolling websites with two vertical panels or layouts scrolling in opposite directions. A great way to catch the visitor attention with an original page.

See Demo

View on GitHub

It is quite similar to one of my previous plugins, fullpage.js, from which I’ve taken part of the code. This way the task was much faster this time. It only took me one day to get the beta version.

How to use it

The needed HTML markup is the following:

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">Section 1 Left</div>
        <div class="ms-section">Section 2 Left</div>
        <div class="ms-section">Section 3 Left</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">Section 1 Right</div>
        <div class="ms-section">Section 2 Right</div>
        <div class="ms-section">Section 3 Right</div>
    </div>
</div>
Code language: HTML, XML (xml)

To initialize the plugin all you need to do is including the needed js and css files and call the plugin inside a $(document).ready function using the selector which will be used as a wrapper.

$(document).ready(function() {
    $('#multiscroll').multiscroll();
});
Code language: JavaScript (javascript)

Documentation & Questions

For more documentation about the plugin, check the github repository.
I encourage you to use the issues forum to report bugs or ask any question related with the plugin.
Also, don’t forget to search for your question before opening a new thread as they might have been already asked previously.

Extensions

The project has been growing with the time I’ve added some payed extensions that can be added to enhance its behaviour. Don’t miss them out!

WordPress theme / template

The guys from Themify have created what it seems like a nice theme for wordpress. I encourage you to make use of it if you are planning to integrate multiScroll.js and wordpress.