Realisieren Sie einen wunderschönen Seitenübergangsanimationseffekt basierend auf Javascript mit Fähigkeiten zum Herunterladen von Quellcode-Javascript-js-Tutorial-php.cn

Realisieren Sie einen wunderschönen Seitenübergangsanimationseffekt basierend auf Javascript mit Fähigkeiten zum Herunterladen von Quellcode-Javascript

WBOY

Freigeben： 2016-05-16 15:35:03

Original

1717 Leute haben es durchsucht

Durch Klicken auf das Menü auf der linken Seite wird die entsprechende Seite mit einer verschiebbaren Filteranimation und einem Fortschrittsbalkeneffekt geladen. Natürlich erfolgt das Laden der Seite Ajax-gesteuert, und der gesamte Ladeübergangsprozess verläuft sehr reibungslos und bietet ein sehr gutes Benutzererlebnis.

HTML

In der HTML-Struktur enthält .cd-main den Hauptinhalt der Seite, .cd-side-navigation enthält die seitliche Navigationsleiste und #cd-loading-bar wird für die Fortschrittsbalkenanimation verwendet.

<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 -->

Nach dem Login kopieren

CSS

Wir haben die .cd-side-navigation auf der linken Seite der Seite korrigiert und ihre Höhe auf 100 % eingestellt, sodass das linke Navigationsmenü immer die linke Seitenleiste einnimmt, wenn der Hauptinhalt auf der rechten Seite gescrollt wird Das Navigationsmenü bewegt sich nicht.

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

Nach dem Login kopieren

JavaScript

Wenn wir auf das linke Menü klicken, wird die Funktion „triggerAnimation()“ aufgerufen. Diese Funktion löst die Ladefortschrittsbalken-Animationsfunktion „loadingBarAnimation()“ aus und lädt dann die Funktion „loadNewContent()“.

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

Nach dem Login kopieren

Wenn eine neue Seite ausgewählt wird, wird ein neues Element .cd-section erstellt und in das DOM eingefügt, und dann wird der neue URL-Inhalt geladen().

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

Nach dem Login kopieren

Wenn Sie über eine asynchron geladene Seite zum Browserverlauf der vorherigen Seite zurückkehren möchten, können Sie im Browser auf „Zurück“ klicken. Das Zurückkehren zur vorherigen Seite hat auch einen Übergangsanimationseffekt.