jQuery plug-in multiScroll realizes full-screen mouse scrolling switching page special effects

jQuery plug-in multiScroll realizes full-screen mouse scrolling switching page special effects_jquery

WBOY

Release： 2016-05-16 16:04:42

Original

1105 people have browsed it

I often see full-screen scrolling special effects on some product introduction pages. Today I recommend a jQuery plug-in to everyone. The jQuery full-screen mouse scroll switching page special effects plug-in multiScroll.js supports many parameter custom configurations. scrollingSpeed: switching Speed, easing: animation effect, navigation: false whether navigation appears, and also supports event Callback function calls, onLeave, afterLoad, etc., the effect is still good, browser compatibility: IE8, 9, Opera 12, and modern browsers, The browser needs to support CSS3 properties, and it is recommended to learn and use it.

Usage:

1. Load plug-ins and jQuery

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" /> 
<script src="libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="vendors/jquery.easings.min.js"></script>  
<script type="text/javascript" src="jquery.multiscroll.js"></script>

Copy after login

2.HTML content

<div id="multiscroll"> 
  <div class="ms-left"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
  <div class="ms-right"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
</div>

Copy after login

3. Function call

<script type="text/javascript"> 
$(document).ready(function() { 
  $('#multiscroll').multiscroll{ 
    verticalCentered : true, 
    scrollingSpeed: 700, 
    easing: 'easeInQuart', 
    menu: false, 
    sectionsColor: [], 
    navigation: false, 
    navigationPosition: 'right', 
    navigationColor: '#000', 
    navigationTooltips: [], 
    loopBottom: false, 
    loopTop: false, 
    css3: false, 
    paddingTop: 0, 
    paddingBottom: 0, 
    normalScrollElements: null, 
    keyboardScrolling: true, 
    touchSensitivity: 5, 
 
    //events 
    onLeave: function(index, nextIndex, direction){}, 
    afterLoad: function(anchorLink, index){}, 
    afterRender: function(){}, 
    afterResize: function(){}, 
  }); 
}); 
</sript>

Copy after login

View DEMO Script download

The above is the entire content of this article, I hope you all like it.