HTML5 single-page gesture Sliding Screen Switching Principle and html5 page gesture Principle

HTML5 single-page gesture Sliding Screen Switching Principle and html5 page gesture Principle

HTML5 Touch event and CSS3 animation (Transform, Transition) are used for single page gesture Sliding Screen switching of H5, as shown below. This article briefly describes its implementation principles and main ideas.
1. Implementation Principle
Suppose there are five pages, each of which occupies 100% of the screen width, create a DIV container viewport, set its width to 500%, and then load the five pages into the container, divide the five pages equally, and set the default location of the container to 0 and overflow to hidden, so that the screen displays the first page by default.

Copy XML/HTML Code to clipboard

1. <Div id = "viewport" class = "viewport">
2. <Div class = "pageview" style = "background: #3b76c0">
3. <H3> page-1
4. </Div>
5. <Div class = "pageview" style = "background: # 58c03b;">
6. <H3> page-2
7. </Div>
8. <Div class = "pageview" style = "background: # c03b25;">
9. <H3> page-3
10. </Div>
11. <Div class = "pageview" style = "background: # e0a718;">
12. <H3> page-4
13. </Div>
14. <Div class = "pageview" style = "background: # c03eac;">
15. <H3> page-5
16. </Div>
17. </Div>

CSS style:

Copy XML/HTML Code to clipboard

1. . Viewport {
2. Width: 500%;
3. Height: 100%;
4. Display:-webkit-box;
5. Overflow: hidden;
6. Pointer-events: none;
7. -Webkit-transform: translate3d (0, 0 );
8. Backface-visibility: hidden;
9. Position: relative;
10. }

Register the touchstart, touchmove, and touchend events. When the finger slides on the screen, use the CSS3 transform to set the position of the viewport in real time. For example, to display the second page, set the transform of the viewport: translate3d (100%, 0) is enough. Here we use translate3d to replace translateX. translate3d can automatically enable GPU-accelerated rendering on the mobile phone, making the page slide smoother.
2. Main Ideas
Moving your finger onto the screen, sliding, and leaving the screen is a complete operation. The corresponding operation triggers the following events:
Place your finger on the screen: ontouchstart
Slide your finger on the screen: ontouchmove
Finger off screen: ontouchend
We need to capture the three phases of the touch event to complete the page slide:
Ontouchstart: initializes the variable, records the position of the finger, and records the current time.

Copy XML/HTML Code to clipboard

1. /* Place your finger on the screen */
2. Document. addEventListener ("touchstart", function (e ){
3. E. preventDefault ();
4. Var touch = e. touches [0];
5. StartX = touch. pageX;
6. StartY = touch. pageY;
7. InitialPos = currentPosition; // The initial position before the current slide.
8. Viewport. style. webkitTransition = ""; // cancel the animation effect
9. StartT = new Date (). getTime (); // record the start time of the finger Press
10. IsMove = false; // whether to slide
11. }. Bind (this), false );
    

Ontouchmove: obtains the current position, calculates the deltaX of the finger movement difference on the screen, and then moves the page following

Copy XML/HTML Code to clipboard

1. /* Slide your finger on the screen and move the page following your finger */
2. Document. addEventListener ("touchmove", function (e ){
3. E. preventDefault ();
4. Var touch = e. touches [0];
5. Var deltaX = touch. pageX-startX;
6. Var deltaY = touch. pageY-startY;
7. // If the displacement in the X direction is greater than that in the Y direction, it is considered to be sliding left and right.
8. If (Math. abs (deltaX)> Math. abs (deltaY )){
9. MoveLength = deltaX;
10. Var translate = initialPos + deltaX; // The current location to be moved
11. // If translate> 0 or <maxWidth, the page exceeds the boundary.
12. If (translate <= 0 & translate> = maxWidth ){
13. // Move the page
14. This. transform. call (viewport, translate );
15. IsMove = true;
16. }
17. Direction = deltaX> 0? "Right": "left"; // determines the direction in which the finger slides.
18. }
19. }. Bind (this), false );

Ontouchend: When the finger leaves the screen, it calculates the page on which the screen finally stays. First, calculate the finger stop time on the screen. If deltaT is less than 300 ms, it is considered to be a fast slide. On the contrary, it is a slow slide. The processing of Fast Slide and slow slide is different:
(1) if it is a quick slide, the current page will be completely stuck in the center of the screen (you need to calculate the number of slides required for the current page)
(2) if it is a slow slide, you also need to determine the sliding distance of your fingers on the screen. If the sliding distance does not exceed 50% of the screen width, You need to roll back to the previous page, instead, you must stay on the current page.

Copy XML/HTML Code to clipboard

1. /* When the finger leaves the screen, calculate the page on which it will eventually stay */
2. Document. addEventListener ("touchend", function (e ){
3. E. preventDefault ();
4. Var translate = 0;
5. // Calculate the time when your finger stays on the screen
6. Var deltaT = new Date (). getTime ()-startT;
7. If (isMove) {// Slide left and right
8. // Use an animated transition to slide the page to the final position
9. Viewport. style. webkitTransition = "0.3 s accept-webkit-transform ";
10. If (deltaT <300) {// if the stay time is less than 300 ms, it is considered as a Fast Slide, regardless of the sliding distance, it stays on the next page
11. Translate = direction = 'left '?
12. CurrentPosition-(pageWidth + moveLength): currentPosition + pageWidth-moveLength;
13. // If the final position exceeds the boundary position, it will stay at the boundary position
14. Translatetranslate = translate> 0? 0: translate; // left boundary
15. Translatetranslate = translate <maxWidth? MaxWidth: translate; // right boundary
16. } Else {
17. // If the sliding distance is less than 50% of the screen, return to the previous page
18. If (Math. abs (moveLength)/pageWidth <0.5 ){
19. Translate = currentPosition-moveLength;
20. } Else {
21. // If the sliding distance is greater than 50% of the screen, it slides to the next page.
22. Translate = direction = 'left '?
23. CurrentPosition-(pageWidth + moveLength): currentPosition + pageWidth-moveLength;
24. Translatetranslate = translate> 0? 0: translate;
25. Translatetranslate = translate <maxWidth? MaxWidth: translate;
26. }
27. }
28. // Run the slide command to display the page completely on the screen.
29. This. transform. call (viewport, translate );
30. }
31. }. Bind (this), false );

In addition, you must calculate the page number of the current page and set the current page number.

Copy XML/HTML Code to clipboard

1. // Calculate the current page number
2. PageNow = Math. round (Math. abs (translate)/pageWidth) + 1;
3. SetTimeout (function (){
4. // Set the page number. DOM operations need to be placed in the sub-thread; otherwise, a lag occurs.
5. This. setPageNow ();
6. }. Bind (this), 100 );

These are the basic ideas. Of course, you need to pay attention to some details in the actual operation process. I will not elaborate on them here, and they will all be reflected in the Code. I will introduce you to the HTML5 single-page gesture Sliding Screen switching principle. I hope it will be helpful to you!