Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes

Utilisez des gestes

Lors de la conception d'un plug-in de défilement plein écran, nous espérons que les développeurs pourront presque :

Générer rapidement un H5 exquis sans écrire de scripts

Support de la molette de défilement PC et du toucher mobile

Effets de transition sympas

Gestion flexible de la chronologie

Tout est configurable

Mais pas de script il n'y a pas de flexibilité ? ! Non. Ici, vous pouvez non seulement configurer certains paramètres en HTML, mais également injecter de la logique via la fonction de rappel du plug-in. Prenons le HTML partiel de l'exemple que vous avez vu ci-dessus en scannant le code pour analyser la posture d'utilisation d'AlloyTouch.FullPage :

<div id="fullpage">
    <div>
      <div>
        <div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
        <div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
        <div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div>
      </div>
    </div>
     
    <div>
      <div>
        <div class="animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
        <div class="animated" data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
      </div>
    </div>
    ...
    ...
    ...
 </div>

Notez que ce qui précède n'est qu'une partie du HTML , et j'ai mis du HTML sans rapport avec la configuration du plug-in qui a été supprimé. Analysons-les un par un :

class="animated" est conforme à la convention d'animate.css. L'ajout de cette classe signifie qu'il y aura une animation.

data-delay représente la durée pendant laquelle l'élément DOM marqué attendra avant de commencer à lire l'animation après avoir fait défiler la page. La valeur par défaut est 0 si le développeur ne la marque pas.

data-show représente le type d'animation affiché par l'élément DOM marqué

data-hide représente le type d'animation caché de l'élément DOM marqué (ceci est généralement invisible pour les utilisateurs, mais pour show Time lissage, généralement réglé sur le type opposé à data-show)

Tant de configurations, tant de configurations ! ! Assez simple ! !

Bien sûr, vous devez l'initialiser en js :

new AlloyTouch.FullPage("#fullpage",{
    animationEnd:function () {
     
    },
    leavePage: function (index) {
      console.log("leave"+index)
    },
    beginToPage: function (index) {
      console.log("to"+index);
      pb.to(index / (this.length-1));
    }
  });

animationEnd est la fonction de rappel après la fin du défilement

leavePage représente la sortie d'un certain La fonction de rappel de la page

beginToPage représente la fonction de rappel pour accéder à une certaine page

Le pb ci-dessus est utilisé pour définir la progression de la navigation ou la progression Vous pouvez ignorer. ceci pour l'instant. Si nécessaire, les utilisateurs peuvent encapsuler eux-mêmes n’importe quel composant de la barre de progression.

Analyse des principes

Ici, nous extrayons principalement le code principal d'AlloyTouch.FullPage pour l'analyse :

new AlloyTouch({
  touch: this.parent,
  target: this.parent,
  property: "translateY",
  min: (1 - this.length) * this.stepHeight,
  max: 0,
  step: this.stepHeight,
  inertia: false,
  bindSelf : true,
  touchEnd: function (evt, v, index) {
    var step_v = index * this.step * -1;
    var dx = v - step_v;
 
    if (v < this.min) {
      this.to(this.min);
    } else if (v > this.max) {
      this.to(this.max);
    } else if (Math.abs(dx) < 30) {
      this.to(step_v);
    }else if (dx > 0) {
      self.prev();
    } else {
      self.next();
    }
    return false;
  },
  animationEnd: function () {
    option.animationEnd.apply(this,arguments);
    self.moving = false;
  }
});

Le Dom qui est touché et déplacé ici est le DOM pleine page, c'est-à-dire que this.parent

ci-dessus défile de haut en bas, donc l'attribut du mouvement est traduireY

min peut être transmis via window.innerHeight et calculé à partir du nombre total de pages, this.stepHeight est window.innerHeight

max est évidemment 0

l'étape est évidemment window.innerHeight, qui est this.stepHeight

inertie : False signifie désactiver le mouvement inertiel, c'est-à-dire que l'utilisateur lâche prise et ne fera pas défiler de manière inerte

bindSelf signifie que touchmove, touchend et touchcancel sont tous liés à this.parent lui-même, pas à la fenêtre. Si bindSelf n'est pas défini, touchmove, touchend et touchcancel sont tous liés à la fenêtre.

Je dois expliquer en détail ici. Cette configuration de bindSelf est très utile. Par exemple, un scénario d'application typique consiste à résoudre le problème de l'imbrication d'AlloyTouch. Par exemple, dans l'exemple que vous avez vu en scannant le code ci-dessus, la démo avec AlloyTouch imbriquée est la suivante :

Il s'agit en fait d'un défilement imbriqué. Est-ce que rouler l'intérieur fera rouler également l'extérieur ? Comment le résoudre ? Le scroll à l'intérieur doit ajouter bindSelf et éviter les bulles :

Regardons le code détaillé du scroll interne :

var scroller = document.querySelector("#scroller");
Transform(scroller,true);
 
new AlloyTouch({
  touch:"#demo0",
  target: scroller,
  property: "translateY",
  min:250-2000,
  max: 0 ,
  touchStart:function(evt){
    evt.stopPropagation();
  },
  touchMove:function(evt){
    evt.stopPropagation();
  },
  bindSelf:true
})

Dans ce cas, à l'intérieur du code HTML imbriqué Nested AlloyTouch ne fera pas de bulles, c'est-à-dire que le défilement à l'intérieur ne déclenchera pas le défilement à l'extérieur.

Continuez à analyser le code source FullPage :

touchEnd est la fonction de rappel après que le doigt de l'utilisateur quitte l'écran. Il contient une logique de traitement des limites :

Le dépassement de min et max entraînera des corrections correspondantes à min et max.

correction par étape, si la valeur absolue est inférieure à 30px, elle sera réinitialisée.

correction par étape, si la valeur absolue est supérieure à 30px et supérieure à 0, elle ira à la. page précédente.

correction par étapes, si la valeur absolue est supérieure à 30px et si elle est inférieure à 0, elle passera à la page suivante

Retour faux signifie que la logique de correction de mouvement. après que AlloyTouch ait relâché, votre main ne sera pas exécutée. Ceci est très important

animationEnd est le rappel après la fin du mouvement. La fonction exécutera l'animationEnd transmise par l'utilisateur depuis AlloyTouch.FullPage et la définira. passer à faux.

Commencez le voyage d'AlloyTouch.FullPage

Github : https://github.com/AlloyTeam/AlloyTouch

Ce qui précède représente l'intégralité du contenu de cet article , J'espère que cela sera utile à tout le monde. L'apprentissage est utile et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus de plug-in de défilement plein écran AlloyTouch, vous pouvez créer une page H5 fluide en 30 secondes. Pour les articles connexes, veuillez faire attention au site Web PHP chinois !