Je vois souvent des effets spéciaux de défilement en plein écran sur certaines pages d'introduction de produits. Aujourd'hui, je recommande un plug-in jQuery à tout le monde. Le plug-in d'effets spéciaux de changement de page de défilement de souris en plein écran jQuery multiScroll.js prend en charge de nombreux paramètres personnalisés. configurations scrollingSpeed : vitesse de commutation, easing : effet d'animation, navigation : false si la navigation apparaît, et prend également en charge les appels de fonction de rappel d'événement, onLeave, afterLoad, etc., l'effet est toujours bon, compatibilité des navigateurs : IE8, 9, Opera 12, et les navigateurs modernes, le navigateur doit prendre en charge les propriétés CSS3 et il est recommandé de l'apprendre et de l'utiliser.
Utilisation :
1. Charger les plug-ins et 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>
2.Contenu HTML
<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>
3. Appel de fonction
<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>
Voir la DÉMO Téléchargement du script
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.