Transitions
These (as far as I am aware) only work in Internet Explorer 5.5+ for
Windows. It is therefore necessary to start off with a browser and OS
check. See the DHTML library tutorial for more info about that.
| First off here is a
list of the transitions that you can use: |
| » barn |
resembles a door opening or
closing |
| » blinds |
appears to open or close blinds |
| » checkerBoard |
squares are uncovered like a
checkerboard over original content |
| » fade |
fades new content in |
| » gradientWipe |
passes a gradient band over the
old content |
| » inset |
reveals new content diagonally |
| » iris |
produces an effect like the
opening of a camera |
| » radialWipe |
like a windscreen wiper |
| » randomBars |
exposes random lines of pixels one
at a time |
| »
randomDissolve |
exposes random pixels one at a
time |
| » slide |
new content slides in over old
content |
| » spiral |
reveals new content in a spiral
motion |
| » stretch |
stretching motion to cover
original content; like a cube rotating |
| » strips |
moves successive strips into place |
| » wheel |
like spokes of a wheel uncovering
new content |
| » zigzag |
reveals new content with a forward
and backwards motion down the object |
Now we need to know how to use them. To find the properties of each
transition look at the Microsoft
Documentation (if I find the time I may make a utility similar to the WebFX
one linked above).
We'll start off with the fade transition that takes a single property
"duration":
All that is gold does not glitter,
Not all those who wander are lost;
The old that is strong does not wither,
Deep roots are not reached by the frost.
do fade
Now here is the function that does the above:
function doFadeImage() {
//create object reference
var el = document.all["divFader"];
//add the filter to the style tag
el.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
//apply the filter
el.filters[0].apply();
//change the object
if(state) {
el.style.backgroundColor = "#BDAA91";
el.style.color = "#000000";
el.innerHTML = verse1;
state = 0;
} else {
el.style.backgroundColor = "#000000";
el.style.color = "#BDAA91";
el.innerHTML = verse2;
state = 1;
}
//play the filter
el.filters[0].play();
}
Now this may seem a bit complicated so I'll brake it down into 4 important
stages:
1. Add the filter to the style attribute, either through code or in
the HTML
2. Use the code el.filters[0].apply(); to initiate the transition
3. Make the changes to the object through code
4. Play the changes using el.filters[0].play();
To see how to use transitions with the CoolMenus script check example 14 where you can try all the different filters.
Good luck! Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.
|
