< Jquery Tutorial

Jquery plugins-Multiscroll

← Previous Next →



multiscroll.js is a jQuery plugin for creating split pages with two vertical scrolling panels.

A Simple of multiscroll example as shown below




<!DOCTYPE html>
<html xmlns = "https://www.w3.org/1999/xhtml">

<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title>multiscroll.js - split multi-scrolling pages plugin</title>

<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/multiscroller/jquery.multiscroll.css" />
<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/multiscroller/examples.css" />

<script
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "/jquery/src/multiscroller/jquery.easings.min.js"></script>
<script type = "text/javascript"
src = "/jquery/src/multiscroller/jquery.multiscroll.js"></script>

<script type = "text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
navigation: true,
navigationTooltips: ['One', 'Two', 'Three'],
loopBottom: true,
loopTop: true
});
});
</script>
</head>

<body>

<ul id = "menu">
<li data-menuanchor = "first"><a href = "#first">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>

<div id = "myContainer">

<div class = "ms-left">

<div class = "ms-section" id = "left1">
<h1>Left 1</h1>
</div>

<div class = "ms-section" id = "left2">
<h1>Left 2 </h1>
</div>

<div class = "ms-section" id = "left3">
<h1>Left 3</h1>
</div>

</div>

<div class = "ms-right">

<div class = "ms-section" id = "right1">
<h1>Right 1</h1>
</div>

<div class = "ms-section" id = "right2">
<h1>Right 2</h1>
</div>

<div class = "ms-section" id = "right3">
<h1>Right 3</h1>
</div>

</div>

</div>

</body>

</html>
← Previous Next →