Jquery animation-5. Implementation of single-page navigation animation Effects

This chapter will introduce the implementation of single-page navigation animation effects. It feels a bit difficult. In fact, I don't know what the name of this animation is.

In fact, the function he implemented is well understood, that is, there is a parent page, the parent page will load a certain number of child pages, the parent page has the link of each child page. By default, the content of the first child page is displayed on the parent page. When you click the link on the parent page, the content of the corresponding child page is displayed. The parent page and child page are actually different pages, but the result of the whole animation is that all pages are switched on the parent page, and the URL does not change. If you still don't know what is going on, download the demo and check the running effect.

　　

Let's get started with our tutorial. The first step is to create the HTML code of the parent page.

<div id="outer-container">    
Next is the sub-page. The content of each sub-page is similar. I only show the content of the first sub-page.
<div id="content">    
Note that the content of the subpage must be surrounded by a container whose ID is content, because this ID is required when we use the load method in JS Code!
After HTML is defined, CSS needs to be defined. I will not post it here, which is a waste of space. Download the source code and go to CSS.
Before creating JS Code, the parent page must reference jquery and a file called jquery. scrollto. JS jquery plug-in, and then we can officially start writing JS (jquery. scrollto. JS is a plug-in provided by the jquery plug-in site. In my demo, you do not need to download it ). The next step is the JS Code we implemented.
// Clear the content carrier $ ('# content '). empty (); // obtain the window object var win = $ (window), // obtain the header navigation linklinks = $ ('header nav '), // obtain the content carrier content =$ ('# content'), // define the content page positioning object positions ={}, // define the screen height and width object screensize = {width: win. width (), height: Win. height ()},
This code is relatively simple, that is, some variables are defined.
// Define the content page carrier pages =$ ('<div> </div>', {ID: 'page '}). BIND ('contentloaded', function () {// a Custom Event contentloaded is defined here // Add the content page carrier object to the content carrier object $ (this ). appendto (content ). parent (). addclass ('full'); // defines the height and width of the content carrier object. width (screensize. width * links. length); content. height (screensize. height * 2); // fixed the header and footer, and set the body's padding-top. In this way, when switching the page, the loaded new page will not overwrite the content on the header. parent (). find ('header, footer '). addcl Ass ('fixed') .closest('body' regular .css ('padding-top ', $ ('header '). outerheight (); // Add the click event links for the tag of the header and footer. add ('footer nav '). click (function (e) {// block default event E. preventdefault (); // obtain the ID var id = (this. href. indexof ('#')! =-1 )? This. href. split ('#') [1]: 'page-'+ this. title. split ('') [1]; // get the header and footer object var navs = $ ('header '). add ('footer '); // The navigation disappears navs. fadeout ('fast '); // jquery is used here. scrollto. JS plug-in for page movement effect $. scrollto ({top: positions [ID]. top, left: positions [ID]. left}, 800, function () {// animation ends. The navigation navs is displayed. slidedown ('fast ');});});});
This code is a core part of the Code. The function is to define the overall Packaging Container pages of the sub-page and create a custom contentloaded event for it, in this event, add the pages object to the parent page and define the click event for the tag in the header and footer. There are comments in the code to help you understand the code. If you still don't understand the code, you can leave a message for me.
// Traverse the links object and load the corresponding subpage links. each (function (I) {// obtain the ID var ID of the subpage to be loaded = 'page-'+ (I + 1 ); // sets the subpage offset object positions [ID] ={}; positions [ID]. left = screensize. width * I; positions [ID]. top = (I % 2 )? Screensize. height: 0; // load the sub-page through the load event and add it to the sub-page container pages. // pay attention to the details on the load method '# content> *', make sure that the child pages you want to load contain content with the ID as content, // load only loads # Content $ ('<div> </div>', {'class': 'page', load: This. href + '# content> *' condition detail .css ({left: positions [ID]. left, top: positions [ID]. top }). appendto (pages); this. href = '#' + ID; // when all sub-pages are loaded, the Custom Event contentloaded if (I = links. length-1) {pages. trigger ('contentloaded ');}});
The code above implements the function of loading subpages and defining their offsets. When all subpages are loaded, the contentloaded event is triggered.
Well, today's explanation may be complete, and I hope it will help you.
Demo: jquery.animation.singlepagesite.zip