JQuery implements page Transition animation effect switching _ jquery

This is a very cool jQuery and CSS3 plug-in that calls AJAX to switch the page Transition animation effect. This page switching special effect uses AJAX to dynamically load the link content. During page loading, CSS3 is used to create a very cool page Transition animation effect. The pushState method is used in the plug-in to manage the browser browsing history. if you need it, you can refer to it to introduce the production process.

HTML structure

This page switches the HTML structure of the special effect using The p. cd-cover-layer is used to create the mask layer for page switching. the p. cd-loading-bar is the loading progress bar during ajax loading.

  
  
  
  
   Page Transition   
     
 
  

  
 
  
 
       

CSS style

In this page switching effect, the body: before and body: after pseudo elements are used to create two mask layers during the page switching process to cover the page content. They are positioned at a fixed position, with a height equal to 50 Gbit/s and a width of 100%. By default, the CSS transform attribute is used to hide them (translateY (-100%)/translateY (100% )). When the user switches the page, these elements are moved to the playback port (Add. page-is-changing class) to the element ).
The following figure demonstrates the process:

Page switching special effects

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

During page switching, the fade-in and fade-out effect of the page content is achieved by changing the transparency of p. cd-cover-layer. It overwrites the. cd-main-content element and has the same background color.When the. page-is-changing class is added, the transparency is changed from 0 to 1.
The Loading progress bar is created using the. cd-loading-bar: before pseudo element. By default, it is reduced (scaleX (0) and transform-origin: left center. When Page switching starts, scaleX (1) is used to enlarge the original size.

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

The smooth transition effect in the special effect is implemented using CSS Transitions. Each animation element is added with different transition-delay to achieve different element animation sequence.
JAVASCRIPT

The data-type = "page-transition" attribute is used on the link in this page switching effect to trigger page switching events. When the plugin detects a user click event, the changePage () method is executed.

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

This method triggers the page switching animation and loads new content using the loadNewContent () method.

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

When the new content is loaded, it replaces the original Element .. The page-is-changing class is removed from the body, and the newly loaded content is added to window. history (using the pushState () method ).

function loadNewContent(url, bool) {  var newSectionName = 'cd-'+url.replace('.html', ''),   section = $('
');      section.load(url+' .cd-main-content > *', function(event){   // load new content and replace 
 
   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);    } });}        
 

To trigger the same page switching animation effect when you click the back button of the browser, the plug-in listens to the popstate event and runs the changePage () function when it triggers the event.

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