Jquery achieves beautiful page Transition animation effects

By clicking on the page side menu, the corresponding page is loaded with a sliding transition animation, with a progress bar effect. Of course, the loading of the page is Ajax-driven, the entire load transition process is very smooth, very good user experience.

Html
HTML structure,. Cd-main contains the content of the page body,. Cd-side-navigation contains the side navigation bar, #cd-loading-bar is used to make progress bar animation.

The code is as follows

Copy Code

<nav class= "Cd-side-navigation" > <ul> <li> <a href= "index.html" class= "selected" data-menu= "index" > <svg><!--svg content here--></svg> Intro </a> </li> <li> <!--...--> </li> <!--other list items here--> </ul> </nav> <!--. Cd-dashboard--> <main class= "Cd-main" > <section class= "cd-section index Visible" > <div class= "Cd-title" > <span>some text here</span> </div> <a href= "#index-content" class= "Cd-scroll" >scroll down</a> <div class= "cd-content" id= "Index-content" > <!--content here--> </div> <!--. cd-content--> </section> <!--. cd-section--> </main> <!--. Cd-main--> <div id= "Cd-loading-bar" data-scale= "1" class= "index" ></div> <!--lateral loading bar-->

Css
We will. Cd-side-navigation fixed on the left side of the page, and set its height to 100%, so that the left navigation menu will always occupy the left sidebar, the right body content scrolling, the left navigation menu does not move.

The code is as follows

Copy Code

. cd-side-navigation { position:fixed; Z-index:3; top:0; left:0; HEIGHT:100VH; width:94px; Overflow:hidden; } . cd-side-navigation UL { height:100%; Overflow-y: auto; } . cd-side-navigation::before { /* Background color of the side navigation * * Content: '; Position:absolute; top:0; left:0; height:100%; Width:calc (100%-4px); Background-color: #131519; } . cd-side-navigation Li { Width:calc (100%-4px); } . cd-side-navigation a { Display:block; position:relative; } . cd-side-navigation A::after { /* 4px line to the right of the item-visible on hover * * Content: '; Position:absolute; top:0; Right: -4px; height:100%; width:4px; Background-color: #83b0b9; opacity:0; } . No-touch. cd-side-navigation A:hover::after { Opacity:1; }

Javascript
When we click on the left menu, call the Triggeranimation () function, which triggers the loading of the progress bar animation function loadingbaranimation (), and then loads the page content function: Loadnewcontent ().

The code is as follows	Copy Code
function Loadingbaranimation () { var Scalemax = loadingbar.data (' scale '); if (ScaleY + 1 < Scalemax) { Newscalevalue = ScaleY + 1; } // ... Loadingbar.velocity ({ Scaley:newscalevalue }, Loadingbaranimation); }

When a new page is selected, a new element. Cd-section will be created and inserted into the DOM, then load () the new URL content.

The code is as follows

Copy Code

function Loadnewcontent (newsection) { var section = $ (' <section class= ' cd-section overflow-hidden ' +newsection+ ' "></section> '). Appendto ( MainContent); Load the new content from the proper HTML file Section.load (newsection+ '. html. Cd-section > * ', Function (event) { Loadingbar.velocity ({ Scaley:scalemax//this is the ScaleY value to cover the entire window height (100% loaded) }, function () { Section.addclass (' visible '); var url = newsection+ '. html '; if (url!=window.location) { Add the new page to the Window.history Window.history.pushState ({Path:url}, ', url '); } // ... }); }); }

Pages that are loaded asynchronously can return to the previous page's history, and then click Back on the browser. Returning to the previous page also has a transition animation effect.