Directly for you to introduce the production process, I hope you can enjoy.
HTML structure
This page toggles the HTML structure of the effects using a <main> element to act as a parcel 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 for Ajax loading.
<main>
<div class= "Cd-index cd-main-content" >
<div>
CSS Styles
This page toggle effect uses the Body::before and Body::after artifacts to create two mask layers during page transitions to obscure page content. Their positioning is fixed positioning, height is equal to 50VH, width is 100%. By default, they are hidden by using CSS Transform properties (Translatey ( -100%)/translatey (100%)). When the user switches the page, the elements are moved back to the viewport (by adding the. Page-is-changing class to the <body> element).
The following picture illustrates this process:
Page Toggle Effects
Body::after, Body::before {/
* These are the 2 half blocks which cover the content once the animation is triggered */< C2/>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 effect of the page content is achieved by changing the transparency of the div.cd-cover-layer. It overrides the. cd-main-content element and has the same background color, and then changes the transparency from 0 to 1 when <body> is added. Page-is-changing class.
The loading progress bar uses the. Cd-loading-bar::before pseudo element to make. By default it is narrowed (ScaleX (0)) and Transform-origin:left Center. When the page switch starts it is used ScaleX (1) to place the original size of the assembly.
. Cd-loading-bar {/* is the loading bar-visible while switching from one page to the
following one * *
posit ion:fixed;
height:2px;
width:90%
}
. Cd-loading-bar::before {
/* 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 transitions in effects are implemented using CSS transitions. Each animation element is added to a different transition-delay to achieve a different sequence of element animations.
JAVASCRIPT
The page toggle 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 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 toggle animation and loads 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 the new content is loaded, it replaces the contents of the original <main> element. Page-is-changing class is removed from the body, and the newly loaded content is added to the 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 wit H 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 toggle animation effect When the user clicks the browser's rollback button, the plugin listens for the Popstate event and executes the Changepage () function when it triggers.
$ (window). On (' Popstate ', function () {
var newpagearray = location.pathname.split ('/'),//this is the URL of the
p Age to be loaded
newpage = newpagearray[newpagearray.length-1];
if (!isanimating) changepage (newpage);
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
