jQuery implémente l'animation de transition de page de changement effect_jquery

Je vais vous présenter directement le processus de production, j'espère que vous l'aimerez.

Structure HTML

La structure HTML de cet effet de changement de page utilise un élément

comme élément d'habillage de la page. div.cd-cover-layer est utilisé pour créer le calque de masque lors du chargement de div.cd. -bar est la barre de progression du chargement pendant le chargement ajax.

<main>
 <div class="cd-index cd-main-content">
  <div>
   <h1>Page Transition</h1>
   <!-- your content here -->
  </div>
 </div>
</main>
 
<div class="cd-cover-layer"></div> <!-- this is the cover layer -->
 
<div class="cd-loading-bar"></div> <!-- this is the loading bar -->      

Style CSS

Cet effet de changement de page utilise les pseudo-éléments body::before et body::after pour créer deux calques de masque pour couvrir le contenu de la page pendant le processus de changement de page. Leur positionnement est fixe, avec une hauteur égale à 50vh et une largeur de 100%. Par défaut, ils sont masqués à l'aide de la propriété CSS transform (translateY(-100%)/translateY(100%)). Lorsque l'utilisateur change de page, ces éléments sont replacés dans la fenêtre d'affichage (en ajoutant la classe .page-is-changing à l'élément ).
L'image ci-dessous illustre ce processus :

Effets de changement de page

body::after, body::before {
 /* these are the 2 half blocks which cover the content once the animation is triggered */
 height: 50vh;
 width: 100%;
 position: fixed;
 left: 0;
}
body::before {
 top: 0;
 transform: translateY(-100%);
}
body::after {
 bottom: 0;
 transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
 transform: translateY(0);
}       

Lorsque la page change, l'effet de fondu entrant et sortant du contenu de la page est obtenu en modifiant la transparence de div.cd-cover-layer. Il superpose l'élément .cd-main-content avec la même couleur d'arrière-plan, puis modifie la transparence de 0 à 1 lorsque l'élément est ajouté avec la classe .page-is-changing.
La barre de progression du chargement est réalisée à l'aide du pseudo-élément .cd-loading-bar::before. Par défaut, il est réduit (scaleX(0)) et transform-origin : left center. Lorsque le changement de page commence, il est agrandi à sa taille d'origine à l'aide de scaleX(1).

.cd-loading-bar {
 /* this is the loading bar - visible while switching from one page to the following one */
 position: fixed;
 height: 2px;
 width: 90%;
}
.cd-loading-bar::before {
 /* this is the progress bar inside the loading bar */
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 transform: scaleX(0);
 transform-origin: left center;
}
.page-is-changing .cd-loading-bar::before {
 transform: scaleX(1);
}       

Les effets de transition fluides dans les effets spéciaux sont obtenus à l'aide de transitions CSS. Différents délais de transition sont ajoutés à chaque élément animé pour obtenir différentes séquences d'animation d'éléments.
JAVASCRIPT

L'attribut data-type="page-transition" est utilisé sur le lien dans cet effet de changement de page pour déclencher l'événement de changement de page. Lorsque le plug-in détecte un événement de clic utilisateur, la méthode changePage() sera exécutée.

$('main').on('click', '[data-type="page-transition"]', function(event){
  event.preventDefault();
  //detect which page has been selected
  var newPage = $(this).attr('href');
  //if the page is not animating - trigger animation
  if( !isAnimating ) changePage(newPage, true);
});        

Cette méthode déclenchera l'animation de changement de page et chargera le nouveau contenu via la méthode loadNewContent().

function changePage(url, bool) {
  isAnimating = true;
  // trigger page animation
  $('body').addClass('page-is-changing');
  //...
  loadNewContent(url, bool);
  //...
}        

Lorsque un nouveau contenu est chargé, il remplacera le contenu de l'élément

La classe .page-is-changing est supprimée du corps et le contenu nouvellement chargé est ajouté à window.history (à l'aide de la méthode pushState()).

function loadNewContent(url, bool) {
  var newSectionName = 'cd-'+url.replace('.html', ''),
   section = $('<div class="cd-main-content '+newSectionName+'"></div>');
    
  section.load(url+' .cd-main-content > *', function(event){
   // load new content and replace <main> content with the new one
    $('main').html(section);
    //...
    $('body').removeClass('page-is-changing');
    //...
 
    if(url != window.location){
     //add the new page to the window.history
     window.history.pushState({path: url},'',url);
    }
 });
}        

Afin de déclencher le même effet d'animation de changement de page lorsque l'utilisateur clique sur le bouton Précédent du navigateur, le plug-in écoute l'événement popstate et exécute la fonction changePage() lorsqu'il est déclenché.

$(window).on('popstate', function() {
  var newPageArray = location.pathname.split('/'),
    //this is the url of the page to be loaded 
    newPage = newPageArray[newPageArray.length - 1];
  if( !isAnimating ) changePage(newPage);
});