• jQuery Video Tutorials

jQuery - Multiscroll.js

Advertisements

Previous Page
Next Page  

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>

This should produce following result −

Click here
Advertisements