jQuery Plugin For Creating One Page Multi Scrolling Website - multiScroll.js

jQuery Plugin For Creating One Page Multi Scrolling Website - multiScroll.js
File Size: 177 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

multiScroll.js is an awesome jQuery plugin for one page scrolling website that allows to divide the web page into TWO vertical scrolling panels with navigation.

See also:

How to use it:

1. Include the latest jQuery javascript library together with jquery.multiscroll.js and jquery.multiscroll.css in the Html page.

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

2. Include jQuery easing plugin for easing options (OPTIONAL).

<script type="text/javascript" src="vendors/jquery.easings.min.js"></script>

3. Create a navigation menu with anchor links pointing to the target sections you'd like to scroll to.

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

4. Create main content for your web page.

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

4. Initialize 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>

5. 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',
'navigationTooltips': [],
'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>

Changelog:

2018-08-02

  • v0.2.2

2018-03-08

  • Fixing issue with scrollOverflow extension and touch devices.

2018-03-06

  • Improving resizeHandler

This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.