AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds

Usage posture

When designing a full-screen scrolling plug-in, I hope that developers will almost:

Quickly generate exquisite H5 without writing any scripts

Support PC scroll wheel and mobile touch

Cool transition effects

Flexible timeline management

Everything is configurable

But no scripting Surely there is no flexibility? ! no. Not only can you configure some parameters in HTML, you can also inject some logic through the callback function of the plug-in. Let’s take the partial HTML of the example you saw above by scanning the code to analyze the usage posture of 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>

Note that the above is only part of the HTML, and I have combined some with the plug-in Configuration-independent HTML has been removed. Let’s analyze them one by one:

class="animated" conforms to the convention of animate.css. Adding this class means there will be animation.

data-delay represents how long the marked DOM element will wait before starting to play animation after scrolling to the page. The default value is 0 if the developer does not mark it.

data-show represents the animation type displayed by the marked DOM element

data-hide represents the hidden animation type of the marked DOM element (this is usually invisible to the user, but for show Time smoothing, generally set to the opposite type of data-show)

So much, so many configurations, so many configurations! ! Simple enough! !

Of course you need to initialize it in 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 is the callback function after the scroll ends

leavePage represents leaving a certain page Callback function

beginToPage represents the callback function that intends to go to a certain page.

The pb above is used to set the progress of nav or progress. This can be ignored for now. If necessary, users can encapsulate any progress bar component themselves.

Principle Analysis

Here we mainly extract the core code of AlloyTouch.FullPage for analysis:

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;
  }
});

Here The touch and movement Dom are all fullpage DOM, that is, this.parent

above is scrolling up and down, so the movement attribute is translateY

min, which can be passed through window.innerHeight and the total Calculating the number of pages, this.stepHeight is window.innerHeight

max is obviously 0

step is obviously window.innerHeight, which is this.stepHeight

inertia: false means Disable inertial motion, that is, the user lets go and will not scroll inertly

bindSelf means that touchmove, touchend and touchcancel are all bound to this.parent itself, not to the window. If bindSelf is not set, touchmove, touchend and touchcancel are all bound to window.

We need to explain in detail here. This bindSelf configuration is very useful. For example, a typical application scenario is to solve the problem of AlloyTouch nesting AlloyTouch. For example, in the example you saw by scanning the code above, the Demo with AlloyTouch nested is as follows:

This is actually nested scrolling. Will rolling the inside cause the outside to also roll? How to deal with it? The scrolling inside must add bindSelf and prevent bubbling:

Let’s look at the detailed code of the internal scrolling:

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
})

In this case, the nesting inside the nested HTML AlloyTouch will not bubble up, that is, scrolling inside will not trigger outside scrolling.

Continue to analyze the FullPage source code:

touchEnd is the callback function after the user's finger leaves the screen. There is boundary processing logic in it:

If min and max are exceeded, min and max will be corrected accordingly.

step correction, if the absolute value is less than 30px, it will be reset

step correction, if the absolute value is greater than 30px and greater than 0, it will go to the previous page

step correction, if the absolute value is greater than 30px and If it is less than 0, it will go to the next page.

Return false means that the movement correction logic after AlloyTouch releases your hand will not be run. This is very important.

animationEnd is the callback after the movement ends. The function will execute the animationEnd passed by the user from AlloyTouch.FullPage, and set moving to false.

Start the journey of AlloyTouch.FullPage

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

The above is the entire content of this article, I hope it will be helpful to everyone The learning is helpful, and I hope everyone will support the PHP Chinese website.

For more AlloyTouch full-screen scrolling plug-in, you can create a smooth H5 page in 30 seconds. For related articles, please pay attention to the PHP Chinese website!