Home>

This is a very cool effect of jquery and css3 through ajax call switch page transition animation special effects plugin.This page switching effect uses ajax to dynamically load linked content,When the page loads,Use CSS3 to make very cool page transition animation effects.The plugin uses the pushstate method to manage the browser's browsing history.

Introducing the production process directly to everyone,I hope you enjoy 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 is switched,div.cd-loading-bar is the loading progress bar during ajax loading.

<main>
 <div>
  <div>
   <h1>page transition</h1>
   <!-Your content here->
  </div>
 </div>
</main>
<div></div><!-This is the cover layer->
<div></div><!-This is the loading bar->

css style

This page switching effect uses the body ::before and body ::after pseudo-elements to create two masking layers during the page switching process to cover the page content.Their positioning is fixed,The height is equal to 50vh and the width is 100%. by default,Hide them using the css transform property (translatey (-100%)/translatey (100%)). When the user switches pages,These elements are moved back into the viewport (by adding on theelement.page-is-changing class).

The following picture illustrates 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);
}

When the page switches,The fade effect of page content is achieved by changing the transparency of div.cd-cover-layer.It covered.cd-main-content element and have the same background color,Then whenwas added to the .page-is-changing class, the transparency was changed from 0 to 1.

loading progress bar used.cd-loading-bar ::before pseudo element to make.By default it is scaled down (scalex (0)) and transform-origin:left center. When the page switch is started, it is enlarged to the 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);
}

Smooth transitions in special effects are implemented using css transitions. Each animation element is added with a different transition-delay to achieve a different element animation order.

javascript

The page switching effect uses the data-type="page-transition" attribute on the link to trigger a page switching event.When the plugin 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 the new content through the loadnewcontent () method.

function changepage (url, bool) {
  isanimating=true;
  //trigger page animation
  $("body"). addclass ("page-is-changing");
  //...
  loadnewcontent (url, bool);
  //...
}

When new content is loaded,Replaces the contents of the original<main>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 + 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);
    }
 });
}

In order to trigger the same page transition animation effect when the user clicks the browser's back button,The plugin listens to the popstate event and executes the changepage () function when it fires.

$(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);
});
  • Previous In-depth analysis of the writing of for loop in Go language
  • Next Detailed Zend Framework Tutorial Zend_Controller_Dispatcher usage
  • Trends