jQuery implementiert den Animationseffekt für den Wechsel des Seitenübergangs

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um den Übergangsanimationseffekt beim Seitenwechsel zu realisieren. Jetzt kann ich ihn mit Ihnen teilen.

Das ist ein sehr cooler Effekt . jQuery und CSS3 rufen das Spezialeffekt-Plug-in für Seitenübergangswechsel über AJAX auf. Dieser Seitenwechseleffekt verwendet AJAX, um Linkinhalte dynamisch zu laden. Beim Laden der Seite wird CSS3 verwendet, um einen sehr coolen Seitenübergangsanimationseffekt zu erstellen. Die pushState-Methode wird im Plug-in verwendet, um den Browserverlauf zu verwalten. Freunde, die sie benötigen, können sich auf

beziehen, um Ihnen den Produktionsprozess direkt vorzustellen.

HTML-Struktur

Die HTML-Struktur des Seitenwechseleffekts verwendet ein 61b85035edf2b42260fdb5632dc5728a-Element als Wrapping-Element der Seite, p.cd-cover-layer wird verwendet, um beim Seitenwechsel eine Maskenebene zu erstellen. p.cd-loading-bar ist der Ladefortschrittsbalken beim Laden von Ajax.

<main>
 <p class="cd-index cd-main-content">
  <p>
   <h1>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 -->

CSS-Stil

Die Seitenwechseleffekte verwenden body::before und body::The Nach dem Pseudoelement werden zwei Maskenebenen erstellt, um den Seiteninhalt während des Seitenwechsels abzudecken. Ihre Positionierung ist fest, mit einer Höhe von 50 Vh und einer Breite von 100 %. Standardmäßig werden sie mithilfe der CSS-Transformationseigenschaft (translateY(-100%)/translateY(100%)) ausgeblendet. Wenn der Benutzer die Seite wechselt, werden diese Elemente zurück in das Ansichtsfenster verschoben (durch Hinzufügen der Klasse .page-is-changing zum Element 6c04bd5ca3fcae76e30b72ad730ca86d).
Das folgende Bild zeigt diesen Vorgang:

Seitenwechseleffekte

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

Beim Wechseln der Seite wird der Ein- und Ausblendeffekt des Seiteninhalts durch Ändern der Transparenz von p.cd-cover-layer erreicht. Es überlagert das .cd-main-content-Element mit derselben Hintergrundfarbe und ändert dann die Transparenz von 0 auf 1, wenn der 6c04bd5ca3fcae76e30b72ad730ca86d mit der .page-is-changing-Klasse hinzugefügt wird.
Der Ladefortschrittsbalken wird mithilfe des Pseudoelements .cd-loading-bar::before erstellt. Standardmäßig ist es verkleinert (scaleX(0)) und transform-origin: links in der Mitte. Wenn der Seitenwechsel beginnt, wird er mit „scaleX(1)“ auf die Originalgröße vergrößert.

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

Der sanfte Übergangseffekt bei Spezialeffekten wird mithilfe von CSS-Übergängen erreicht. Jedem animierten Element werden unterschiedliche Übergangsverzögerungen hinzugefügt, um unterschiedliche Elementanimationssequenzen zu erzielen.
JAVASCRIPT

Das data-type="page-transition"-Attribut wird für den Link in diesem Seitenwechseleffekt verwendet, um das Seitenwechselereignis auszulösen. Wenn das Plug-in ein Benutzerklickereignis erkennt, wird die Methode changePage() ausgeführt.

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

Diese Methode löst die Seitenwechselanimation aus und lädt neue Inhalte über die Methode „loadNewContent()“.

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

Wenn der neue Inhalt geladen wird, ersetzt er den Inhalt im ursprünglichen 61b85035edf2b42260fdb5632dc5728a-Element. Die .page-is-changing-Klasse wird aus dem Hauptteil entfernt und der neu geladene Inhalt wird zu window.history hinzugefügt (mithilfe der Methode 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);
    }
 });
}

Um denselben Seitenwechsel-Animationseffekt auszulösen, wenn der Benutzer auf die Zurück-Schaltfläche des Browsers klickt, wird das Popstate-Ereignis im Plug abgehört -in und Die Funktion changePage() wird ausgeführt, wenn sie ausgelöst wird.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

jQuery und CSS3 implementieren imitiertes Blütenblattnetz-Navigationsmenü mit fester Top-Position und schwebendem Effekt

jQuery How um einen Schiebeknopfschalter zu implementieren

Über das jQuery-Plugin Timelinr zum Implementieren von Timeline-Effekten

Das obige ist der detaillierte Inhalt vonjQuery implementiert den Animationseffekt für den Wechsel des Seitenübergangs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!