Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!DOCTYPE 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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <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', | |
| 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> |