jQuery implements switching page transition animation effect

This article mainly introduces jQuery to realize the transition animation effect of switching pages. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

This is a very cool effect. jQuery and CSS3 call switching page transition animation special effects plug-in through AJAX. This page switching effect uses AJAX to dynamically load link content. When the page is loaded, 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's browsing history. Friends who need it can refer to

to directly introduce the production process to you. I hope you like it.

HTML structure

The HTML structure of the page switching effect uses a

element as the wrapping element of the page, and p.cd-cover-layer is used Create a mask layer when switching pages. p.cd-loading-bar is the loading progress bar when loading 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 style

The page switching effects use body::before and body:: The after pseudo-element creates two mask layers to cover the page content during page switching. Their positioning is fixed, with a height equal to 50vh and a width of 100%. By default, they are hidden using the CSS transform property (translateY(-100%)/translateY(100%)). When the user switches pages, these elements are moved back into the viewport (by adding the .page-is-changing class to the element).
The following picture demonstrates this 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);
}

When the page is switched, the fade-in and fade-out effect of the page content is achieved by changing the transparency of p.cd-cover-layer. It overlays the .cd-main-content element with the same background color, and then changes the transparency from 0 to 1 when the is added with the .page-is-changing class.
Loading progress bar is made using .cd-loading-bar::before pseudo-element. By default it is scaled down (scaleX(0)) and transform-origin: left center. When the page switch begins it is enlarged to its original size using 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);
}

The smooth transition effect in special effects is achieved using CSS Transitions. Different transition-delays are added to each animated element to achieve different element animation sequences.
JAVASCRIPT

The data-type="page-transition" attribute is used on the link in this page switching effect to trigger the page switching event. When the plug-in detects a user click event, the changePage() method will be 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 will trigger the page switching animation and load new content through 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 will replace the content in 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 = $(&#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);
    }
 });
}

In order to trigger the same page switching animation effect when the user clicks the browser's back button, the plug-in listens to the popstate event and executes it in it The changePage() function is executed when triggered.

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jQuery and CSS3 implement imitation petal net fixed top position navigation menu with floating effect

jQuery How to implement a sliding button switch

About jQuery plugin Timelinr to implement timeline effects

The above is the detailed content of jQuery implements switching page transition animation effect. For more information, please follow other related articles on the PHP Chinese website!