Visual Guide to Screen Transitions
This guide shows you the available effects for screen transitions.
You can apply any effect by setting the screen-change-animation attribute
within the screen's CSS style, e.g.:
.screenAlert {
padding: 2;
background-color: #a999;
layout: horizontal-shrink | vertical-shrink | center | bottom;
screen-change-animation: left;
}
Screen transitions may have a direction - when you show a screen with a defined
screen-change-animation, the animation will be played in the forward mode. When
you are showing a screen without a defined screen-change-animation and the previous
screen has a defined animation, the animation will be played in the backward direction.
When both the previous as well as the next screen do have a screen-change-animation, the
animation of the next screen will take precedence and it will be played in the foward direction.
The only exception to this rule is when the previous screen is an Alert - in that case the
Alert's screen-change-animation will be played in the backward direction, even
if the next screen has also a defined animation.
Note that not all animations do honor the direction of the transition.
The following movies show the main menu as the last screen and the popup alert as the next screen, before returning to the main menu again.
bottom Animation
|
Move in the next screen from the bottom with the bottom screen-change-animation. |
bottomshutter Animation
|
|
Move in the next screen from the bottom using a shutter with the bottomshutter screen-change-animation. |
bwToColor Animation
|
|
Fade the next screen from black/white to the original color with the bwToColor screen-change-animation. |
cage Animation
|
|
Make every second pixel row visible in a linear movement with the cage screen-change-animation. |
diagonal Animation
|
|
Move in the next screen diagonally using the diagonal screen-change-animation. |
domino Animation
|
|
Zoom out the last screen in a somewhat weird animation with the domino screen-change-animation. |
fade Animation
|
|
Fade in the next screen smoothely with the fade screen-change-animation. |
fadeOutFadeIn Animation
|
|
Fade out the last screen, then fade in the next screen using the fadeOutFadeIn screen-change-animation. |
flash Animation
|
|
Tear the last screen horizontally open from within its center with the flash screen-change-animation. |
left Animation
|
|
Move in the next screen from the left with the left screen-change-animation. |
leftshutter Animation
|
|
Move in the next screen from the left with a shutter using the leftshutter screen-change-animation. |
newWave Animation
|
|
Splash in the next screen using something like a zipper with the newWave screen-change-animation. |
particle Animation
|
|
Zoom into single pixels of the last screen to show the next screen with the particle screen-change-animation. |
rain Animation
|
|
Splash in the next screen in a rain-like fashion with the rain screen-change-animation. |
right Animation
|
|
Move in the next screen from the right with the right screen-change-animation. |
rightshutter Animation
|
|
Move in the next screen from the right with a shutter using the rightshutter screen-change-animation. |
scale Animation
|
|
Scale in the next screen with the scale screen-change-animation. |
squeeze Animation
|
|
Squeeze out the last screen with the squeeze screen-change-animation. |
top Animation
|
|
Move in the next screen from the top with the top screen-change-animation. |
topshutter Animation
|
|
Move in the next screen from the top with a shutter using the topshutter screen-change-animation. |
verticalflash Animation
|
|
Tear the last screen vertically open from within its center with the verticalflash screen-change-animation. |
zoomboth Animation
|
|
Zoom both the previous as well as the next screen with the zoomboth screen-change-animation. |
zoomin Animation
|
|
Zoom in the next screen with the zoomin screen-change-animation. |
zoomout Animation
|
|
Zoom out the next screen with the zoomout screen-change-animation. |
