JS nice–javascript code beautification and formatting tools

Today we would like to share with you a set of creative page toggle Bear Effects collection. We've listed a set of animations in the example that can be applied to the page transitions to create interesting navigation effects. While some of the effects are very simple, it's just a simple swipe, but others take advantage of the visual angle (perspective) and the 3D conversion (3D Transforms) to create some solid-motion effects.

　　

Download the online demo now

Tips: For the best results, browse through modern browsers such as ie10+, Chrome, Firefox, and Safari.

CSS animations are divided into groups based on the effect of their implementation. To show the page transitions, we use the following structure:

1234567

<div id="pt-main"class="pt-perspective">    <div class="pt-page pt-page-1">            </div>    <div class="pt-page pt-page-2"><!-- ... --></div>    <!-- ... --></div>

The position of the perspective container is relative, we add 1200 pixels to pivot it. The following styles are required for all animation effects:

1234567891011121314151617181920212223242526272829303132

.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 transitions, i.e. we need to leave one page at the top of another page. Here's a code example that shows animation classes and keyframe animations, zooming the page in different directions, and fading effects:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

/* 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 purposes of this demo, we have applied the corresponding animation class to the current page and the page that will be switched in, for example:

12345678910111213141516

//... case17:    outClass = ‘pt-page-scaleDown‘;    inClass = ‘pt-page-moveFromRight pt-page-ontop‘;    break;case18:    outClass = ‘pt-page-scaleDown‘;    inClass = ‘pt-page-moveFromLeft pt-page-ontop‘;    break;case19:    outClass = ‘pt-page-scaleDown‘;    inClass = ‘pt-page-moveFromBottom pt-page-ontop‘;    break; // ...

To view the demo, you can browse through a full set of page transitions by clicking the first button, or you can select a specific effect from the drop-down menu to preview it.

I hope you will like this and get inspired to create something more exciting!

Download the online demo now

JS nice–javascript code beautification and formatting tools