Like! Amazing page switching animation effects [Download source code]

The following example lists a set of animations that can be applied to page switching to create interesting navigation effects. Although some effects are very simple, they are just simple sliding actions, others use the Perspective (Perspective) and 3D transform (3D Transforms) to create some three-dimensional dynamic effects.

Download Online Demo now

 

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

CSS animations are divided into different groups based on their implementation effects. To display the page transition effect, we use the following structure:

<div id="pt-main" class="pt-perspective">    <div class="pt-page pt-page-1">        
The position of the perspective container is relative. We add 1200 pixels to the perspective container. The following styles are required for all animation effects:
.pt-perspective {    position: relative;    width: 100%;    height: 100%;    perspective: 1200px;    transform-style: preserve-3d;} .pt-page {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    visibility: hidden;    overflow: hidden;    backface-visibility: hidden;    transform: translate3d(0, 0, 0);} .pt-page-current,.no-js .pt-page {    visibility: visible;} .no-js body {    overflow: auto;} .pt-page-ontop {    z-index: 999;}
The above. pt-page-ontop style is used for some page transition effects, that is, we need to leave one page at the top of another page. The following is a code example that shows the animation class and Key Frame Animation, scaling the webpage and fade-in and fade-out effects in different directions:
/* scale and fade */ .pt-page-scaleDown {    animation: scaleDown .7s ease both;} .pt-page-scaleUp {    animation: scaleUp .7s ease both;} .pt-page-scaleUpDown {    animation: scaleUpDown .5s ease both;} .pt-page-scaleDownUp {    animation: scaleDownUp .5s ease both;} .pt-page-scaleDownCenter {    animation: scaleDownCenter .4s ease-in both;} .pt-page-scaleUpCenter {    animation: scaleUpCenter .4s ease-out both;} /************ keyframes ************/ /* scale and fade */ @keyframes scaleDown {    to { opacity: 0; transform: scale(.8); }} @keyframes scaleUp {    from { opacity: 0; transform: scale(.8); }} @keyframes scaleUpDown {    from { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownUp {    to { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownCenter {    to { opacity: 0; transform: scale(.7); }} @keyframes scaleUpCenter {    from { opacity: 0; transform: scale(.7); }}
For the purpose of this demonstration, we have applied the corresponding animation class to the current page and the page to be switched in. For example:
//... case 17:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromRight pt-page-ontop';    break;case 18:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromLeft pt-page-ontop';    break;case 19:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromBottom pt-page-ontop';    break; // ...
View the demo. You can click the first button to view the complete page switching effect. You can also select a specific effect from the drop-down menu to preview.
I hope you will like this and get inspiration from it to create something more exciting!
 
Download Online Demo now