H5 Single page gesture slide screen switching principle

H5 Single page gesture slide screen switch is implemented using HTML5 Touch and CSS3 Animation (transform,transition), as shown below, this paper briefly describes its implementation principle and main ideas.

1. Principle of realization

Assuming there are 5 pages, each page is 100% wide, create a div container viewport, set its width (width) to 500%, then load 5 pages into the container, divide the 5 pages evenly across the container, and finally set the container's default position to 0. Overflow is set to hidden so that the first page is displayed by default on the screen.

<DivID= "Viewport"class= "Viewport">    <Divclass= "PageView"style= "background: #3b76c0" >        <H3>Page-1</H3>    </Div>    <Divclass= "PageView"style= "background: #58c03b;">        <H3>Page-2</H3>    </Div>    <Divclass= "PageView"style= "background: #c03b25;">        <H3>Page-3</H3>    </Div>    <Divclass= "PageView"style= "background: #e0a718;">        <H3>Page-4</H3>    </Div>    <Divclass= "PageView"style= "background: #c03eac;">        <H3>Page-5</H3>    </Div></Div>

CSS style:

 .viewport  { width :  500% ; :  100% ;  display : -webkit-box ;  overflow :  hidden ;  Pointer-events :  none ; -webkit-transform :  Translate3d (0,0,0) ;  backface-visibility :  hidden ;  position :  relative ;} 

Registering Touchstart,touchmove and Touchend events, when the finger is sliding on the screen, use CSS3 's transform to set the viewport position in real time, for example, to display a second page, set viewport transform : Translate3d (100%,0,0) can, here we use Translate3d instead of Translatex,translate3d can actively turn on the mobile phone GPU accelerated rendering, page slide smoother.

2. Main ideas

From the finger on the screen, swipe, and then leave the screen is a complete process, the corresponding action will trigger the following events:

Put your finger on the screen: Ontouchstart

Swipe your finger on the screen: Ontouchmove

Finger off Screen: ontouchend

We need to capture these three stages of touch events to complete the slide of the page:

Ontouchstart: Initialize the variable, record the position of the finger, record the current time

/*put your finger on the screen.*/Document.addeventlistener ("Touchstart",function(e) {e.preventdefault (); varTouch = E.touches[0]; StartX=Touch.pagex; Starty=Touch.pagey; Initialpos= CurrentPosition;//the initial position before the slideViewport.style.webkitTransition = "";//Cancel an animation effectStartt =NewDate (). GetTime ();//record the start time of the finger pressIsmove =false;//whether to create sliding}.bind ( This),false);

Ontouchmove: Gets the current position, calculates the deltax of the finger's movement on the screen, and then moves the page following

/*The finger moves on the screen, the page follows the finger*/Document.addeventlistener ("Touchmove",function(e) {e.preventdefault (); varTouch = E.touches[0]; varDeltaX = Touch.pagex-StartX; varDeltaY = Touch.pagey-Starty; //if the displacement in the x direction is greater than the y direction, the left and right slide is considered   if(Math.Abs (DeltaX) >Math.Abs (DeltaY)) {Movelength=DeltaX; varTranslate = Initialpos + deltax;//where you need to move at the moment       //if translate>0 or < MaxWidth, it means the page is out of bounds       if(Translate <=0 && translate >=maxWidth) {           //Moving pages            This. Transform.call (viewport,translate); Ismove=true; } Direction= deltax>0? " Right ":" Left ";//determine the direction of the finger slide}}.bind ( This),false);

Ontouchend: When the finger leaves the screen, the calculation screen eventually stays on which page. First calculate the dwell time of the finger on the screen deltat, if the deltat<300ms, it is considered to be fast sliding, the opposite is slow sliding, fast sliding and slow sliding processing is different:

(1) If it is a quick swipe, let the current page remain intact in the center of the screen (need to calculate the current page and how much need to swipe)

(2) If it is a slow slide, you also need to determine the distance your finger is sliding on the screen, if the distance is not more than the screen width of 50%, you want to fall back to the previous page, instead of staying on the current page

/*when your finger leaves the screen, calculate which page you want to stay on*/Document.addeventlistener ("Touchend",function(e) {e.preventdefault (); varTranslate = 0; //calculate how long your finger stays on the screen   varDeltaT =NewDate (). GetTime ()-Startt; if(Ismove) {//There's been a swipe left and right        //use animation transitions to slide the page to its final positionViewport.style.webkitTransition = "0.3s ease-webkit-transform"; if(DeltaT < 300) {//If the dwell time is less than 300ms, it is considered to be a fast slide, regardless of the sliding distance, will stay to the next pagetranslate = Direction = = ' left '?currentposition-(pagewidth+movelength): currentposition+pagewidth-movelength; //if the final position exceeds the boundary position, it stays at the boundary positionTranslate = translate > 0? 0:translate;//left BorderTranslate = Translate < MaxWidth? Maxwidth:translate;//Right Border}Else {            //if the sliding distance is less than 50% of the screen, go back to the previous page            if(Math.Abs (movelength)/pagewidth < 0.5) {translate = currentposition-movelength; }Else{                //if the sliding distance is greater than 50% of the screen, slide to the next pagetranslate = Direction = = ' left '?currentposition-(pagewidth+movelength): currentposition+pagewidth-movelength; Translate= translate > 0? 0: Translate; Translate= Translate < MaxWidth?maxwidth:translate; }        }        //perform a swipe to make the page display completely on the screen         This. Transform.call (viewport,translate);}}.bind ( This),false);

In addition, calculate the current page is the page, and set the current page number

// calculates the current page number Pagenow = Math.Round (Math.Abs (translate)/pagewidth) + 1; SetTimeout (function(    {// Set page numbers, DOM operations need to be placed in child threads, otherwise the stutter this will occur    . Setpagenow ();}. Bind (this), 100);

Basic ideas on these, of course, in the actual operation of the process there are some details to note, here is not detailed, all in the code can be reflected in the source code has been passed to Git:https://github.com/git-onepixel/guesture, Interested students are welcome to discuss together (due to time reasons, this example does not join the history route), you can also click or scan the following QR code to see the sample effect:

H5 Single page gesture slide screen switching principle