Educational

 Multiscroll.js

Written by

Saim Khalid

in

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"/&gt;&lt;link rel ="stylesheet" type ="text/css" 
     href ="/jquery/src/multiscroller/examples.css"/&gt;&lt;script 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" 
     src ="/jquery/src/multiscroller/jquery.easings.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" 
     src ="/jquery/src/multiscroller/jquery.multiscroll.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;$(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});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id ="menu"&gt;&lt;li data-menuanchor ="first"&gt;&lt;a href ="#first"&gt;First slide&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor ="second"&gt;&lt;a href ="#second"&gt;Second slide&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor ="third"&gt;&lt;a href ="#third"&gt;Third slide&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id ="myContainer"&gt;&lt;div class="ms-left"&gt;&lt;div class="ms-section" id ="left1"&gt;&lt;h1&gt;Left 1&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="left2"&gt;&lt;h1&gt;Left 2&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="left3"&gt;&lt;h1&gt;Left 3&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ms-right"&gt;&lt;div class="ms-section" id ="right1"&gt;&lt;h1&gt;Right 1&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="right2"&gt;&lt;h1&gt;Right 2&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="right3"&gt;&lt;h1&gt;Right 3&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts