Homepage Optimization-smooth scrolling

Introduction:

One of the frequently used methods for displaying products on websites is scrolling, which can increase the number of items displayed and add dynamic effects. However, after careful research, we will find that the animation effects of these scrolling screens are as follows, in particular, the scrolling effect is not ideal. For example, when starting from 1 --> 3, the animation's movement speed is different from 1 --> 2, and 2 --> 1 is another effect, with different moving directions, this results in unsatisfactory user senses.

Analysis:

1. General Implementation of scrolling:

Most websites use a list to implement scrolling. The elements in the mobile layer do not change in order to move them to any frame, only use CSS to change the absolute position (top, left, right, bottom) of the list ).

Advantages: easy to implement

Disadvantage: the scrolling effect is inconsistent and not smooth enough.

2. Simple smooth implementation:

Some websites use a scrolling solution where all frames are independent. When 1 --> 2, frames 1 and 2 are moved up at the same time. After the frames are completely moved, frame 1 is returned to the bottom of the view layer.

Advantages: easy to implement, unified movement, moving to any frame, consistent behavior.

Disadvantage: the movement is not smooth, and two mobile layers are controlled at the same time. The convergence of the two mobile layers is not good.

For example, in Jquery, two independent actions are required for moving two elements:

$ ('# P1'). animate (); $ (' # p2'). animate ();

To make this method smoother, You have to rewrite the animation and process the positions of two elements simultaneously in setTimeout.

3. New solution:

Figure 3-1 when the animation is stopped

Figure 3-2 animation coming soon

Figure 3-3 animation completed

:

1) divided into two layers: view layer and mobile layer.

2) When the animation is stopped, frames are in the view layer, and other frames are not in any layer.

3) the screen will be rolled out. For example, when 2 --> 4, put 2, 4 frames into the mobile layer and move the mobile layer to the view layer.

4) after the animation is completed, place the target frame in the view layer to hide the movement layer.

Advantages:

1) The movement and display layers are completely separated, and the frame elements are independent.

2) consistent movement behavior, smooth animation.

Disadvantages:

1) frame elements need to be moved in Layer 2, and must be sorted before movement to implement relatively complex operations.

2) When a continuous movement (that is, a new movement is started when an action is not completed), special processing is required.

Implementation:

* For details about the effect, refer to the home page of anonymous products (without additional links, for fear of promotion ).

I sorted out a Demo and downloaded it.

Additional:

1) implements delayed image loading.

2) Fast Frame switching latency Processing

3) custom rolling Algorithm

Summary:

The logic of frame switching and stopping is somewhat complicated. When using setTimeout, pay attention to the proper time to clean up.