Note: These transitions are built for IE 4.0 and above.
Do you want to put a little spice in the transition of your pages like the boxing in or dissolve effect? I do…but I also agree with my housemate Brooks, who doesn’t like using the transitions too much. Why? Well, every time someone hits the “back” button, they have to wait for the transition to occur before they can read your page. When this is an impatient world like the Internet is…it gets old quickly. However, if you are creative and use the transitions sparingly or the “random” effect, you should be able to create web page(s) that have a “techy” feel among the myriad of static pages.
Here is how it is done:
Add this code to the <head> </head> area of your page:
<META http-equiv=”Page-Enter” content=”revealTrans(Transition=1,Duration=1.000)”>
So the top of your web page should look something like this:
<html>
<head>
<title>Page Title
</title>
<META http-equiv=”Page-Enter” content=”revealTrans
(Transition=1,Duration=1.000)”>
(Other Meta Tags)
</head>
This meta tag has the “Page-Enter” attribute which will allow this function to kick on when someone enters that page. The “content=”revealTrans” cues their browser to start the transition. The (Transition=1…) lets the users browser know which transition to display. Well, how do YOU know what transition to code?
This is the breakdown of the transitions which you can use:
- “Transition=0” will give the “Box in” effect.
“Transition=1” will give the “Box out” effect.
“Transition=2” will give the “Circle in” effect.
“Transition=3” will give the “Circle out” effect.
“Transition=4” will give the “Wipe up” effect.
“Transition=5” will give the “Wipe down” effect.
“Transition=6” will give the “Wipe right” effect.
“Transition=7” will give the “Wipe left” effect.
“Transition=8” will give the “Vertical blinds” effect.
“Transition=9” will give the “Horizontal blinds” effect.
“Transition=10” will give the “Checkerboard across” effect.
“Transition=11” will give the “Checkerboard down” effect.
“Transition=12” will give the “Random dissolve” effect.
“Transition=13” will give the “Split vertical in” effect.
“Transition=14” will give the “Split vertical out” effect.
“Transition=15” will give the “Split horizontal in” effect.
“Transition=16” will give the “Split horizontal out” effect.
“Transition=17” will give the “Strips left down” effect.
“Transition=18” will give the “Strips left up” effect.
“Transition=19” will give the “Strips right down” effect.
“Transition=20” will give the “Strips right up” effect.
“Transition=21” will give the “Random bars horizontal” effect.
“Transition=22” will give the “Random bars vertical” effect.
“Transition=23” will give the “Random” effect.
The “Duration=1.000” shows that the browser will take ONE second to show the transition. Don’t get carried away with the number of seconds or it can seem like a slow death to your viewer.
Well it’s that simple to put transitions in your website. Happy Transition-ing :o)
Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.
