multiscroll.js
Version:
A simple plugin to create split scrolling websites with two vertical scrolling panels.
135 lines (114 loc) • 3.28 kB
HTML
<html xmlns="http://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>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
<meta name="keywords" content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- IMPORTANT TO ADD EASINGS in jQuery-->
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="../jquery.multiscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#8FB98B', '#DE564B', '#EAE1C0'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
css3: false,
// you can use any on the this list
// https://api.jqueryui.com/1.12/easings/
//
// note you have to include this file
// ../vendors/jquery.easings.min.js
easing: 'easeOutBack'
});
});
</script>
<style>
.ms-section{
text-align: center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(255,255,255, 1);
color: #000;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #000;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="first"><a href="#first">First section</a></li>
<li data-menuanchor="second"><a href="#second">Second section</a></li>
<li data-menuanchor="third"><a href="#third">Third section</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>