"Reprint" mobile Web slide-screen frame sharing

Now very popular in the H5 page slide screen effect, especially in the browser window, almost a lot of promotional activities are used to the upper slide screen, the beginning and front-end colleagues to work together to write a sliding screen effect spent a lot of time, and the page written out in the browser on the compatibility of a lot of pits, so decisively adopted the framework.

The initial contact is the use of iscroll4.js framework, after all, it is more mature, it will make people feel relieved, unfortunately it is not very good in android2.3 screen effect compatibility, there is a disadvantage is that the framework has 25K, for a sliding screen effect loading 25K code is not cost-effective ~

Later found 2 relatively simple (light weight, few bugs), recommended here to everyone, students need not to miss.

(Some students will ask: Why not use the left and right slide screen?) One reason is that swiping the screen to the right in the browser may cause the user to leave the current page by mistake.

Here are 2 examples of the top and bottom slide screen ~

Example one, a simple upper slide screen

Example two, a simple upper slide screen, the slide is attached to the animation ~

There are generally 2 ways to design a sliding screen frame

• Control Parent Container Method
• Control sub-container method

Control Parent Container Method

Swipe the page up or down by controlling the value of the parent element's transform: Translatey or Margin-top or top, each time the offset is the current page height ~

With the slip frame, the library size is 5.75K, very lightweight and can be used with confidence in your project ~

The page style of the slip frame needs to be customized, but here I'm simply writing it out ~

(If you do not use frames, it is recommended to use the Transform:translate (x, y) notation, first transform:translate can design high-performance animation, followed by android2.3+-compatible system, transform: Translatey incompatible with android2.3 system)

Compatible with ios5+, android2.3+ system, its sliding screen function, responsive ~ If you only need to design a simple sliding screen effect, you can consider it ~

Slip frame more detailed features bash here https://github.com/binnng/slip.js

Code:

<! DOCTYPE html>
Download Demo
Control sub-container method
The method is to show only one of the child elements, the other hidden, the slide screen hides the current element, and displays the next sibling element of the current element ~
The fullpage framework is used here, and the library size 7.69k~
Fullpage the page style of the frame does not need to be customized, already has the written good
Compatible with ios5+, android2.3+ system, its sliding screen function, the effect is rich, support scaling, rotation, transparency, automatic sliding screen and other animation effects ~ If you need to design a wonderful sliding screen effect, you can consider it ~
Fullpage frame more detailed features bash here Https://github.com/powy1993/fullpage
Code:
<! DOCTYPE html>
Download Demo
Reproduced from White Oak: http://www.cnblogs.com/PeunZhang/p/4185020.html
"Reprint" mobile Web slide-screen frame sharing