Improvement of front-end programming (18th) ---- research on popular mobile web interaction technology solutions and web technology solutions

Improvement of front-end programming (18th) ---- research on popular mobile web interaction technology solutions and web technology solutions

After my internship stops, the biggest change in my life is that there is no project pressure. You can explore technical implementation based on your interests. For individuals, this process is self-motivated and requires top-down control.

Living in today's mobile Internet blowout, and paying attention to the front-end technology, usually has a special sensitivity to the popular interaction (or gameplay) on the end. If we talk about the MVC Framework as a concept for single-page websites and CSS3 cutting-edge special effects, sharing webpages with friends will push the popular domestic website construction trend from behind the scenes to the front-end.

By studying mobile web popular interactions, ledi builds a preliminary feasible technical solution to achieve single page and DOM animation. In this process, ledi has a deeper understanding of the concept, animation, and general technology of a single page.

I. research background and actual needs

1. Background

As mentioned above, in client-side moments or friend messages, pages that share complex interactions have two features: single-page switching and DOM element special effects. Common application scenarios using the above technologies include: publicity, Q & A, and storytelling. Essentially, the mobile end uses the above two forms of interaction, more like replacing flash's functions on the PC end. A single page corresponds to the concept of frame separation in the animation, and DOM element effects correspond to various effects in the animation.

2. Actual needs

If ledi's sensitivity to front-end technologies is a little realistic demand, ledi's recent Q & A project and a New Year greeting for its high school alumni are even more urgent.

Ledi's Q & A project interaction is simple, and DOM display and hiding are constantly implemented. This is the corresponding animation frame separation function. Frequent DOM operations are used to continuously Switch views, which is obviously more automated. At the same time, entering each view page can be more elegant and changeable, thus forming the practical needs of research.

Ii. Technical Research points and Research Process

1. Technical Research points

As described in the research background and requirements, the main research points are single page switching and CSS3 special effects. In addition to these two research points, there is also a study on the full screen function of the browser, this research point is mainly based on the New Year's greetings project, ledi considered to be consistent with the PPT display mode, A full screen function is required.

2. Study Process

First, use the search engine-related technologies. Here, ledi recommends two technical sources: The jQuery plug-in library website and the dream sky blog.

Four libraries or plug-ins are determined through the above search:

• Browser full screen Plugin: jquery. fullScreen. js
• Full Screen scrolling page switching plug-in: pagePiling. js
• DOM element animation library: WOW. js
• Text animation plug-in: Textillate. js

With the above four options, research one by one, and finally determine the technical solution. Iii. Detailed study process Ledi's research sequence is: full screen plug-in, DOM element animation library, full screen scrolling. 1. Research on full screen plug-ins The general research sequence of ledi can be expressed as: Reading APIs, viewing code examples, making modifications, and applying them to projects. First, I read the full-screen API implementation principle. This article confirms the location of the full-screen API in the DOM element data structure.

Through the research on Visualization over the past six months, ledi has a lot of experience in understanding technical issues at the data structure level. Full-screen API construction is as follows:
Research on jQuery full-screen plug-in, found that the plug-in documentation is incomplete, cannot achieve full-screen switching as expected. So I read the source code of this plug-in, and the source code implementation is very simple:
After reading the source code, you can modify the full screen plug-in as needed to customize the plug-in. However, ledi later considered that in addition to video use scenarios, the webpage is still very non-compliant with user habits, and the later technical solution did not involve this plug-in. However, this research process is worthy of future reference. 2. Study on DOM element animation library Ledi wanted to study the text special effect framework Textillate. js in addition to WOW. js. However, considering the nature of the text special effects and the DOM special effects, there was no further research on the text special effects. WOW. js uses CSS3 and jQuery animations to ensure compatibility. WOW. js, as a class library, has very low-level functions and needs to solve two problems for building animations:

• To construct a frame, You must judge the DOM animation execution status.
• For example, if you use event listening to frame, you need to deepen nesting and the code coupling is too high.

To solve the above problems, ledi adopts the following solutions:

• By searching for API examples, you can see the animation listening events: Start, end, and iteration. This allows you to determine the animation execution status. Fixed the issue of frame formation.
• By using a single page plug-in, each view is used as a scenario, which is used to alleviate the nested hierarchy problem.

To solve the above problem, ledi constructed a WOW. js animation construction solution:
Common animations are classified as follows:
3. Research on the full-screen scrolling page switching plug-in By studying pagePiling. js, this plug-in API is built based on the Status:
API writing is very similar to a single page framework, and code writing is more elegant. This plug-in is used to build the corresponding scenes in the animation. Iv. Technical Solution Research ResultsBased on the above research, we have determined the technical solution for constructing scene Inner Frame Animation with WOW. js and scenario with pagePiling. js. The simple New Year's greeting application constructed in this solution is: http://download.csdn.net/detail/yingyiledi/82811015th abstract process of the study ledi review the entire abstract process of the study as follows: requirement, technology selection, API reading, modification.