Home > Web Front-end > JS Tutorial > body text

jQuery implements switching page transition animation effect_jquery

WBOY
Release: 2016-05-16 15:34:32
Original
1854 people have browsed it

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

HTML structure

The HTML structure of this page switching effect uses a

element as the wrapping element of the page. div.cd-cover-layer is used to make the mask layer when the page switches. div.cd-loading-bar is The loading progress bar during ajax loading.

<main>
 <div class="cd-index cd-main-content">
  <div>
   <h1>Page Transition</h1>
   <!-- your content here -->
  </div>
 </div>
</main>
 
<div class="cd-cover-layer"></div> <!-- this is the cover layer -->
 
<div class="cd-loading-bar"></div> <!-- this is the loading bar -->      
Copy after login

CSS style

This page switching effect uses body::before and body::after pseudo-elements to create two mask layers to cover the page content during the page switching process. 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 image below demonstrates this process:

Page switching 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);
}       
Copy after login

When the page switches, the fade-in and fade-out effect of the page content is achieved by changing the transparency of div.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.
The Loading progress bar is made using the .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);
}       
Copy after login

Smooth transition effects in special effects are 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);
});        
Copy after login

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

When 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 = $('<div class="cd-main-content '+newSectionName+'"></div>');
    
  section.load(url+' .cd-main-content > *', function(event){
   // load new content and replace <main> 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);
    }
 });
}        
Copy after login

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 the changePage() function when it is 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);
});        
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template