"Reprint" mobile Web slide-screen frame sharing

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.