Réalisez un bel effet d'animation de transition de page basé sur javascript avec les compétences de download_javascript du code source

En cliquant sur le menu sur le côté gauche de la page, la page correspondante sera chargée avec une animation de filtre coulissant et un effet de barre de progression. Bien entendu, le chargement de la page est piloté par Ajax, et l'ensemble du processus de transition de chargement est très fluide et offre une très bonne expérience utilisateur.

HTML

Dans la structure HTML, .cd-main contient le contenu principal de la page, .cd-side-navigation contient la barre de navigation latérale et #cd-loading-bar est utilisé pour l'animation de la barre de progression.

<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

Nous avons corrigé .cd-side-navigation sur le côté gauche de la page et défini sa hauteur à 100%, de sorte que le menu de navigation de gauche occupe toujours la barre latérale gauche lorsque le contenu principal à droite défile, la gauche. le menu de navigation ne bouge pas.

.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

Lorsque l'on clique sur le menu de gauche, la fonction triggerAnimation() est appelée. Cette fonction déclenchera la fonction d'animation de la barre de progression du chargement chargementBarAnimation(), puis chargera la fonction de contenu de la page : loadNewContent().

function loadingBarAnimation() { 
  var scaleMax = loadingBar.data('scale'); 
  if( scaleY + 1 < scaleMax) { 
    newScaleValue = scaleY + 1; 
  } 
  // ... 
   
  loadingBar.velocity({ 
    scaleY: newScaleValue 
  }, 100, loadingBarAnimation); 
}

Lorsqu'une nouvelle page est sélectionnée, un nouvel élément .cd-section sera créé et inséré dans le DOM, puis chargera() le nouveau contenu de l'URL.

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); 
      } 
 
      // ... 
    }); 
  }); 
}

Si vous souhaitez revenir à l'historique de navigation de la page précédente via une page chargée de manière asynchrone, vous pouvez cliquer sur Retour sur le navigateur. Le retour à la page précédente a également un effet d'animation de transition.