Create One Page Multi Scrolling Split Websites | multiScroll.js

MultiScroll.js is a simple plugin for creating multi-scrolling websites that allow splitting the webpage into two vertical scrolling panels with navigation.

Introduction

This plugin is in the beta version. More than a welcome suggestion, not only for feature requests but also for coding style improvement.

one page scroll navigation with jquery plugin, jquery one page scroll animation, one page scroll example, one page nav jquery plugin, single page scrolling website tutorial

Compatibility

MultiScroll.js works fully on all modern browsers, as well as some older browsers like Internet Explorer 8 and 9 and Opera 12 … It works with browsers that support CSS3 and with browsers that do not have them, making them ideal for compatibility with older browsers. It is also designed to work on touchscreen devices such as cell phones or tablets.

How to make use of it:

1. Include the most recent jQuery javascript library along with jquery.multiscroll.js and jquery.multiscroll.css within the Html web page.

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiscroll.js"></script>

2. Include jQuery easing plugin for alleviating options.

<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 prefer 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 essential content on your web 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 set up the plugin through 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>

jQuery Plugin For Creating One Page Multi Scrolling Website, multiScroll.js Github, one page scroll js, page scroll jquery, fullpage js alternative


See Demo And Download

Official Website(alvarotrigo): Click Here

This superior jQuery/javascript plugin is developed by alvarotrigo. For extra Advanced Usages, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Star-Rating-JavaScript

Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…

Bootstrap-Show-Notification

Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…

Stackable-Multi-level-Sidebar-Menu

Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…

vue-masonry-gallery

Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…

bootstrap-5-bs-toaster

A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…