Beautiful page Transition animation effect based on JavaScript download _javascript technique with source code

Users click on the menu on the left side of the page, the corresponding page load with the sliding filter animation, and with the 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.

<nav class= "Cd-side-navigation" > <ul> <li> <a href= "index.html" class= "selected" Data -menu= "index" > <svg><!--svg content here--></svg> Intro </a> &L T;/li> <li> <!--...--> </li> <!--other list items here--> </ul& 
Gt </nav> <!--. Cd-dashboard--> <main class= "Cd-main" > <section class= "cd-section index visible" 
    ;  

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.

. 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 ().

function Loadingbaranimation () { 
  var Scalemax = loadingbar.data (' scale '); 
  if (ScaleY + 1 < Scalemax) { 
    Newscalevalue = ScaleY + 1; 
  } 
  // ... 
   
  Loadingbar.velocity ({ 
    scaley:newscalevalue 
  }, MB, 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.

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) { C4/>loadingbar.velocity ({ 
      Scaley:scalemax//this is the ScaleY value to cover the entire window height (100% loaded) c6/>}, the 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.