DHTML Transition Animation Effects between web page loads: 23 different DHTML transition effects
Welcome your visitors with an eye catching start-animation on page load effect when visitor enters your web page. You can say goodbye to your visitors with a cool exit web page transition-effect as the visitor leaves your web page. Choose among 23 different transition effects. No JavaScript needed. Just paste two special meta-tags between your <HEAD> tags just below the title-tag </HEAD> and your friends will be impressed. Works with Internet Explorer 4 or higher. Degrades well for non supporting browsers.... they'll simply see no animation effect.  

Test and Download Your DHTML Transition Effect Below:


Effect "Box in"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Box out"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Circle in"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Circle out"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Wipe up"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Wipe down"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Wipe right"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Wipe left"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Vertical blinds"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Horizontal blinds"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Checkerboard across"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Checkerboard down"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Random dissolve"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Split vertical in"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Split vertical out"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Split horizontal in"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Split horizontal out"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Strips left down"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Strips left up"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Strips right down"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Strips right up"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Random bars horizontal"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Random bars vertical"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Effect "Random all transition effects"    Test it here
 Configuration: Open your web page. Paste the following code between the <head> and </head> tags of your web page.
(insert below the title-tags):


Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: