Front-end Programming Improvement Tour (18) research on the popular interactive technology scheme of----mobile web

After the end of the internship, the biggest change in life is the lack of project pressure, can be based on the interests of the scene, explore the implementation of technology. This process for individuals, the power from the inside out, demand from the top down, all by personal grasp.

Living in the mobile Internet blowout today, but also focus on the front-end technology, usually to the end of the popular interaction (or play) has a special sensitivity. If the previous contact with the MVC framework or the single-page site, CSS3 Frontier effects have a concept, friends circle and friends to share the page, the domestic web site to build the popular trend, from behind the scenes to the front desk.

Yue Timor through the research on mobile web popular interaction, a preliminary feasible technical scheme is constructed to realize the single-page and Dom animation. In this process, Le Emperor for single-page concept, animation, technology, such as the implementation of common, have a deeper understanding.

I. Research background and realistic needs

1. Research background

As mentioned above, there are two features of a Web page that shares complex interactions in a friend or friends message: single-page switching and DOM element effects. The use of the above technology common application scenarios are: propaganda, answer, tell the story. In essence, the mobile side uses the above two forms of interaction, more like the replacement of Flash on the PC side of the function. A single page corresponds to the concept of framing in an animation, and DOM element effects correspond to various effects in the animation.

2. Real-World needs

If Yue Timor to the front-end technology sensitivity to a bit of realistic needs, then Yue Timor recently do the answer project and for high school alumni to do a new Year's greetings to customers, but also urgent needs.

Le Emperor Answer project Interactive do is very simple, and constantly implement the DOM display and hide, this is the corresponding animation sub-frame function. Using frequent DOM operations to constantly switch between view, it is obvious that it can be more automated. At the same time into each view page can be more beautiful and changeable, which constitutes the real demand for research.

Second, technical research points and research process

1. Technical Research Points

As discussed in the research background and requirements, the main research points are single-page switching and CSS3 effects. In addition to these two research points, there is also a study on the full-screen function of the browser, which is based primarily on the New Year's blessing project, which requires a full-screen function to be consistent with the PPT presentation.

2. Research process

First through search engine search related technology, here Le Emperor recommended two technical sources: jquery Plugin library website and Dream Sky Blog Park blog.

Four libraries or plug-in alternatives were identified through the above search:

• Browser Full Screen plugin: jquery.fullScreen.js
• Full-screen scrolling page switcher: pagepiling.js
• DOM element Animation class Library: Wow.js
• Text Animation plugin: textillate.js

with the above four alternatives, one by one, the final identification of technical solutions. Third, the study of the detailed process Yue Timor Research Order is: full-screen plug-in, DOM element animation class Library, full-screen scrolling. 1. Full-screen plug -in research Yue Timor General research sequence can be expressed as: Read the API, view the code examples and modify, apply to the project. first read the full-screen API implementation principle, this article in the DOM element data structure to determine the location of the full-screen API.

through this six-year visualization of the study, Le Emperor consider the technical issues more from the data structure level to understand, or have a lot of experience. The full-screen API is built as follows:
Research jquery full-screen plugin, found that the plug-in document is not complete, can not be expected to achieve full screen switch. So read through the plugin source code, the source code implementation is very simple:
after reading the source code, you can modify the full-screen plug-in as needed to achieve personalized customization. But in the latter stage, considering that the full screen in addition to video use of the scene, the Web page is very inconsistent with user habits, the post-technical program does not involve this plugin. But this research process is still very worthy of reference later. research on the 2.DOM element Animation class Library Yue Timor In addition to wow.js, and then study the text effects framework Textillate.js, but considering the text effects in nature, but also in the DOM effect category, there is no further study of the text effects alone. Wow.js uses the CSS3 and jquery animations to rely on each other to ensure compatibility. Wow.js as a class library, very low-level, for building animations to solve two problems:

• Constructs the frame, needs to judge the DOM animation execution state.
• If you use event monitoring to frame, you need to deepen the nesting, code coupling is too high.

to solve the above problems, Le Emperor has adopted the following solutions:

• Learn the animation listener events by looking at the API example: Start, end, iteration. Thus, the animation execution status is judged. Resolved the framing problem.
• By using a single-page plugin, each view acts as a scene, which is used to mitigate nesting levels.

to solve the above problem, Le Emperor constructs a scheme to build animations using Wow.js:
and the commonly used animations are categorized:
3. Full-screen scrolling page switching plugin research by studying pagepiling.js, this plug-in API is built on state:
The API is written much like a single-page frame, where code writing is more elegant and is used to build the corresponding scene in the animation. Iv. Results of technical programme studiesthrough the above research, we have determined the technical scheme of constructing scene frame animation with Wow.js and building scenes with Pagepiling.js. simple New Year's greetings built with this scheme are: http://download.csdn.net/detail/yingyiledi/8281101v. The abstract process of researchYue Timor Review the entire study abstract process as follows: requirements, technology selection, API reading and combining examples to modify, apply to the project.

Front-end Programming Improvement Tour (18) research on the popular interactive technology scheme of----mobile web