jQuery Girl
  1. jQuery Girl
  3. fullpage.js ajoute un effet de curseur de fondu
Intereting Posts
BOGUE dans l’événement de souris de Highchart avec le type de tracé: Ligne / Spline Jquery show div sur le survol, puis lorsque l’utilisateur survole de div masquer l’aide? jQuery Disable Link jusqu’au chargement de la page jQuery performance, .css ou addClass Appeler une fonction côté serveur en utilisant un javascript Retour téléchargement automatique JQuery Ajax Call Où vont les informations sur les méthodes de jQuery data? qTip2 jquery avec asp.net textbox jQuery – Ne faites qu’une fois Comment obtenir un événement div onblur pour exécuter une fonction javascript? sélecteurs css vs jquery traversal Comment accéder à la variable dans xslt? Après le succès, envoyez show bienvenue-modal Opera – Empêcher la saisie d’avoir le focus Comment faire défiler une seule div dans un élément avec jQuery

fullpage.js ajoute un effet de curseur de fondu

Je n’ai jamais travaillé avec fullpage.js. J’ai beaucoup essayé avec l’effet de transition du curseur. le défilement convient très bien avec un effet de curseur. son déplacement de gauche à droite avec le défilement mais ne peut pas append les effets de fondu en entrée et de fondu en sortie.

Exemple de site: http://www.mi.com/shouhuan/#clock Mon code: http://jewel-mahmud.com/demo-site/index.html 

var slideIndex = 1, sliding = false; $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], scrollingSpeed:1000, css3: true, onLeave: function(index, nextIndex, direction) { if(index == 2 && !sliding) { if(direction == 'down' && slideIndex  1) { sliding = true; $.fn.fullpage.moveSlideLeft(); slideIndex--; return false; } } else if(sliding) { return false; } }, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { sliding = false; } }); });

Ces pages parlent de l’ajout de l’effet de fondu:

  • Utilisation de l’effet de fondu en entrée avec les diapositives fullpage.js
  • Comment faire apparaître en fondu un contenu sur une page qui défile sur un site Web utilisant fullPage.js avec CSS et jQuery

Il semble que l’utilisation des événements de diapositives fullpage.js pour déclencher des animations jQuery s’applique principalement.

Ce jsfiddle semble faire ce que vous voulez (en utilisant des sections).

Il semble y avoir deux façons de faire ce genre de chose et cela dépend de ce que vous essayez d’animer. fullpage.js comporte deux types de vues: .section et .slide . Les diapositives sont des enfants de sections et leurs rappels sont différents. Les exemples utilisent des diapositives, mais vous utilisez des sections, je pense que la confusion est de mise. Pour convertir en effet de fondu, vous devez utiliser les rappels appropriés et appliquer les animations appropriées (différentes entre les sections et les diapositives).

J’utilise quelque chose de facile et de plus efficace. 

  onLeave: function(index, nextIndex, direction) { if( index == 2 && direction == 'down'){ $('#slide1').fadeOut(700); $('#slide2').fadeIn(700); } if( index == 3 && direction == 'down'){ $('#slide2').fadeOut(700); $('#slide3').fadeIn(700); } }, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { sliding = false; },

mais le problème est que je ne peux pas réparer le parchemin quand il glisse. J’ai essayé monsieur. Mais je ne peux pas l’ajuster.

Tiré de cette réponse . Bien que loin d’être parfait, la vitesse de défilement définie dans fullpage.js ne prendra pas effet ici et vous devrez la définir dans le CSS. En outre, cela ne fonctionnera que pour les sections et non pour les diapositives horizontales.

Ajoutez simplement le CSS suivant pour remplacer les styles fullpage.js. 

 .section { text-align: center; } .fullpage-wrapper { width: 100%!important; transform: none!important; } .fp-section { width: 100%!important; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: 0; transition: all .7s ease-in-out; } .fp-section.active { visibility: visible; opacity: 1; z-index: 1; }

Mettre à jour

Il est maintenant possible de le faire via une extension fullpage.js .