jQuery implémente l'effet d'animation de transition de page de changement

Cet article présente principalement jQuery pour réaliser l'effet d'animation de transition lors du changement de page. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

C'est un effet très cool. . Plug-in d'effets spéciaux d'animation de transition de page de changement d'appel jQuery et CSS3 via AJAX. Cet effet de changement de page utilise AJAX pour charger dynamiquement le contenu du lien Lorsque la page est chargée, CSS3 est utilisé pour créer un effet d'animation de transition de page très sympa. La méthode pushState est utilisée dans le plug-in pour gérer l'historique de navigation du navigateur. Les amis qui en ont besoin peuvent se référer à

pour vous présenter directement le processus de production. J'espère qu'il vous plaira.

Structure HTML

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

est utilisé Créer un calque de masque lors du changement de page p.cd-loading-bar est la barre de progression du chargement lors du chargement d'ajax.

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

Style CSS

L'effet de changement de page utilise body::before et body Le ::after pseudo-element crée deux calques de masque pour couvrir le contenu de la page lors du 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 suivante 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);
}

Lors du changement de page, l'effet de fondu entrant et sortant du contenu de la page est obtenu en modifiant la transparence de p.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.
Le chargement de la barre de progression s'effectue à 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);
}

L'effet de transition en douceur dans les effets spéciaux est obtenu à 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 le 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 = $(&#39;<p class="cd-main-content &#39;+newSectionName+&#39;"></p>&#39;);
    
  section.load(url+&#39; .cd-main-content > *&#39;, function(event){
   // load new content and replace <main> content with the new one
    $(&#39;main&#39;).html(section);
    //...
    $(&#39;body&#39;).removeClass(&#39;page-is-changing&#39;);
    //...
 
    if(url != window.location){
     //add the new page to the window.history
     window.history.pushState({path: url},&#39;&#39;,url);
    }
 });
}

Afin de déclencher le même effet d'animation de changement de page lorsque l'utilisateur clique sur le bouton retour du navigateur, l'événement popstate est écouté dans le plug-in et exécutez la fonction changePage() lorsqu'elle se déclenche.

$(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);
});

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

jQuery et CSS3 implémentent un menu de navigation en position supérieure fixe avec imitation pétale net avec effet flottant

jQuery Comment pour implémenter un interrupteur à bouton coulissant

À propos du plugin jQuery Timelinr pour implémenter des effets de chronologie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!