Animation : Tween animations

You can specify an animation type to animate your primary content area whenever a new page is requested. Secondary content areas are not animated, this would ask too much from the users' CPU. The following tween types are available:

  • regularEaseIn
  • regularEaseOut
  • regularEaseInOut
  • strongEaseIn
  • strongEaseOut
  • strongEaseInOut
  • backEaseOut
  • backEaseInOut
  • bounceEaseIn
  • bounceEaseOut
  • bounceEaseInOut
  • elasticEaseIn
  • elasticEaseOut
  • elasticEaseInOut

Code

By default the regularEaseOut-tween is selected. You can change this by using the code below before initiating the script.
<script type="text/javascript" src="js/com.bydust.array.js"></script>
<script type="text/javascript" src="js/com.bydust.ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// the html-object with id "content" is our primary content area,
// and will be animated.
// the html-object with id "sidebar" is our secondary content area
// and will be refreshed without animation.

bda.transitionTweenType = Tween.regularEaseInOut;
// change the default transition type.
// the default transition type is "Tween.regularEaseOut".
// you can select "Tween.None" to disable the tweening.

bda.start(refreshed_content); // init
}
</script>

Animation : Alpha transition

The page content in the primary content area also fades in whenever a new page is loaded. Along with the normal page transitions mentioned above, this creates a nice visual effect on your page load. However, if you have long pages this might add an extra CPU-load to the visitors' computer. You can turn it off with the code below.

Code


<script type="text/javascript" src="js/com.bydust.array.js"></script>
<script type="text/javascript" src="js/com.bydust.ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// the html-object with id "content" is our primary content area,
// and will be animated.
// the html-object with id "sidebar" is our secondary content area
// and will be refreshed without animation.

bda.transitionTweenType = Tween.regularEaseInOut;
// change the default transition type.
// the default transition type is "Tween.regularEaseOut".
// you can select "Tween.None" to disable the tweening.

bda.transitionAlpha = false;
// disables the alpha transitions at a page load.

bda.start(refreshed_content); // init
}
</script>