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.
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>
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(); });
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.
Donations admited
If anyone is so kind to invite me for a coffee I will appreciate it a lot