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