GOOCODE - Find your code/scripts

15 By clicking the menu on side of the page it is loaded along with the corresponding slide transition animations, but also with the progress bar effect. Of course, the page loaded is driven by Ajax, the entire loading process of transition is very smooth, with very good user experience.


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

<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"> 
        <header> 
            <div class="cd-title"> 
                <h2>Animated Page Transition #2</h2> 
                <span>Some text here</span> 
            </div> 
             
            <a href="#index-content" class="cd-scroll">Scroll Down</a> 
        </header> 
  
        <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 fix .cd-side-navigation on the left side of the page, and set its height to 100%, so it has always occupied the left navigation menu on the left sidebar, when the right side of the main content of the scroll, 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 triggerAnimation () function, which will trigger the loading progress bar animation function loadingBarAnimation (), then load the page content functions: 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 () 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){ 
         
        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); 
            } 
  
            // ... 
        }); 
    }); 
} 

Asynchronous loading of the page is also realized to return to the previous browsing history, you can click on to return to the browser. Go Back can equally shows animate the transition.