[Original] mobile web sliding screen frame sharing and web sliding frame sharing

[Original] mobile web sliding screen frame sharing and web sliding frame sharing

In 26th day of this month, I attended the webrebuild Shenzhen site. At the meeting, I listened to SHU Shu's explanation of his initial intentions. The word "craftsman spirit" was once again put forward, and I thought about it again. Focus on a project and do it well, good, better... in real work, we are busy, and there may be a lot of ideas to complete the task. To do better, we need to spend time and energy, work tirelessly, and repeatedly improve products, and increase 99% to 99.99%, it is really not easy. Therefore, professionalism is indispensable ~

Here, I would like to remind myself to maintain the enthusiasm and passion for doing things. Even if the product is not well developed in the future, it will be very helpful for improving our own capabilities ~

Currently, theme sliding is very popular in H5 page sliding, especially in browser windows. Almost a lot of promotion activities are using sliding screens, at the beginning, it took a lot of time to work with front-end colleagues to write slide screens. In addition, the pages that were written made a lot of holes in browser compatibility, so they decided to adopt the framework.

Initially, I came into contact with the iscroll4.js framework. After all, it is relatively mature and reassuring to use it. Unfortunately, it is not compatible with the screen drop effect in android2.3, another drawback is that the framework has a capacity of 25 KB. it is not cost-effective to load 25 KB of code for a sliding screen ~

Later I found two simple ones (lightweight and bug-free). I recommend them to you here. Do not miss them if you need them.

(Why don't I use a sliding screen between the left and right sides? One of the reasons is that sliding the screen to the right in the browser may cause the user to exit the current page by mistake)

The following is an example of two slides ~

Instance 1: Simple slip Screen

Example 2: A simple slide screen with an animation attached to the slide ~

There are two methods to design the sliding screen frame.

• Control parent container Method
• Control Sub-container Method

Control parent container Method

Slide the page up or down by controlling the transform: translateY, margin-top, or top value of the parent element. The value of each shift is the height of the current page ~

The slip framework is used here. The database size is 5.75 kb, which is very lightweight and can be safely used in your project ~

The page style of the slip framework needs to be customized, But I have simply written it here ~

(If you do not use the framework, we recommend using the transform: translate (X, Y) method. First, transform: translate can be used to design high-performance animations. Second, it is compatible with android2.3 + systems. transform: translateY is not compatible with android2.3)

Compatible with ios5 + and android2.3 + systems, with smooth screen function and responsive ~ If you only need to design a simple Sliding Screen Effect, consider it ~

Slip frame more detailed features slam 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. Other elements are hidden. When sliding the screen, the current element is hidden and the next peer element of the current element is displayed ~

The fullPage framework is used here, and the library size is 7.69K ~
The page style of the fullPage framework does not need to be customized.
Compatible with ios5 + and android2.3 + systems. It has a wide range of Sliding Screen functions and supports scaling, rotation, transparency, automatic screen sliding, and other animation effects ~ If you want to design a smooth screen, consider it ~
FullPage framework more detailed features slam here https://github.com/powy1993/fullpage
Code:
<! DOCTYPE html> 
Download demo
 
OK ~ I wish you a happy New Year and a happy new year ~