Implementation of beautiful page transition animation effects based on javascript

This article uses javascript to filter the animation effects of beautiful pages. by clicking the menu on the left of the page, the corresponding page is loaded with a sliding filtering animation with a progress bar. The user experience is very good. If you are interested, let's take a look at it. By clicking the menu on the left of the page, the corresponding page is loaded with a sliding filter animation with a progress bar effect. Of course, page loading is Ajax-driven, and the entire loading transition process is smooth and provides a good user experience.

HTML

In the HTML structure,. cd-main contains the page body content,. cd-side-navigation contains the side navigation bar, and # cd-loading-bar is used for progress bar animation.

    
  
 
     
   
  
    Intro 
     
   
  
  
     
      
  
 
 
  
  
    
       
          
    
         Animated Page Transition #2         Some text here       
       Scroll Down     
        
   
       
         
 
      
   
   
  
  
 
  

CSS

We will. cd-side-navigation is fixed on the left side of the page and its height is set to 100%. In this way, the left navigation menu always occupies the left sidebar, and the left navigation menu does not move when the right body content is scrolling.

.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 you click the menu on the left, call the triggerAnimation () function. This function triggers the loadingBarAnimation () function for loading progress bars, 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   }, 100, loadingBarAnimation); }

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

function loadNewContent(newSection) {   var 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)     }, 400, 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);       }        // ...     });   }); }

To return the historical browsing records of the previous page, you can click return in the browser. Returning to the previous page also has a transition animation effect.