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
-3
d;
}
.pt-page {
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
visibility
:
hidden
;
overflow
:
hidden
;
backface-
visibility
:
hidden
;
transform: translate
3
d(
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 .
7
s ease
both
;
}
.pt-page-scaleUp {
animation: scaleUp .
7
s ease
both
;
}
.pt-page-scaleUpDown {
animation: scaleUpDown .
5
s ease
both
;
}
.pt-page-scaleDownUp {
animation: scaleDownUp .
5
s ease
both
;
}
.pt-page-scaleDownCenter {
animation: scaleDownCenter .
4
s ease-in
both
;
}
.pt-page-scaleUpCenter {
animation: scaleUpCenter .
4
s 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 |
//...
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
;
// ...
|
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