This document requires JavaScript enabled browsers; verify that yours is capable and perhaps only turned off. If you need help with setting up JavaScript, go to our NO Script page.
CSGNetwork.com Free Information

Page Transition Effects Generator

This combination code generator and calculator requires the use of Javascript enabled and capable browsers. Our Page Transition Effects Generator will create meta tags for you that are specific for HTML page transition effects that can enhance the appearance of your website; they are also HTML compliant. There are many different transitions and variations for your web pages! It also allows you preview what the transition looks like. Select the location of Page or Site. Select the Event Time of Enter or Exit, or Both. (If you select both, an Enter and an Exit transition will be created per your other choice selections.) Also select the Duration in seconds. (You can also just use the defaults of Page-Enter and duration of 4 seconds. Select any transition and watch the effect. Once you are happy with the effect, click on Generate The Code. If you decide to change any of the previous selections go through the process again. (You can also MANUALLY enter a Duration value in the Duration Seconds Result box AFTER you have chosen the transition to have it placed into your code for you. That value can be any reasonable number of seconds and milliseconds. Example - 7.5, 7.50, 7.500 or 7.5000; you may have up to 4 decimal places.) Then click on Copy Code To The Clipboard or manually select and copy the code from the box below. Finally, paste the below into the <head> section of your page, in the meta tags area, preferably the LAST tag. You can manually change the duration of the effect by changing the Duration=4 (or Duration=4.0) to another number. The larger, the longer the effect. Each whole number is 1 second with optional decimal milliseconds. NOTE: This page is set to use Circle In transition on entry and a Circle Out on exit. You may use an Enter code and an Exit code on the same page.

Please keep in mind that the transition ONLY takes place entering the page with the transition code on it while coming FROM ANOTHER page, or, in some choices, leaving the page with the transition code on it, going to another page. Refreshing the page or closing the browser will not show the effect; nor will typing the page into your browser and entering it as the first page. Also keep in mind that while these are unique, interesting and attractive occasionally, using them on more that a few pages can be very disruptive, irritating and offensive to a viewer. Use sparingly! Finally, not all browsers are HTML compliant when it comes to this set of effects; this was first available in IE4. As of this update (December 2010), MOST major browsers DO support the generated HTML codes but MOST DO NOT support the IE specific codes below the generator. Test both the HTML codes and, if you choose to use them, the IE specific transition codes in several anticipated browsers to be prudent. On each effect produced by the generator, there are 4 options available for entry or exit. You can change them manually. Our default is "Page-Enter". The options are:

Page-Enter: Displays transition when entering the page from another page.
Site-Enter: Displays transition when entering the site.
Page-Exit: Displays transition when exiting the page to another page.
Site-Exit: Displays transition when exiting the site.

For all of you that wish to use "NON-STANDARD" transitions, below the generator are Microsoft Internet Explorer 5.5 and up ONLY, individual transitions ready to cut and paste! While they are very attractive in IE, they rarely work in other browsers, even in the emulation mode. Options to use them are also shown. They will degrade nicely and the use with a non-IE browser causes no ill-effects. If you wish to use IE transitions, verify that your IE browser is set correctly to use them. Go to Tools, Internet Options (or just Options in some versions), Advanced, and Browsing. Enable Page Transitions should be checked. Some versions of IE have this as a default and some you must turn on the ability to see the transitions. We will consider making a generator for these. We also have many other code generators available for your use on our HTML and JavaScript Code Generators page. Enjoy!

Select The Location
Page Site
Select The Event Time
Enter Exit Both
Location/Time Result
Select Duration Seconds
1 2 3 4 5
Duration Seconds Result
Select The Transition
Blend In
Box In
Box Out
Circle In
Circle Out
Wipe Up
Wipe Down
Wipe Right
Wipe Left
Vertical Blinds
Horizontal Blinds
Checkerboard Across
Checkerboard Down
Random Dissolve
Split Vertical In
Split Vertical Out
Split Horizontal In
Split Horizontal Out
Strips Left Down
Strips Left Up
Strips Right Down
Strips Right Up
Random Bars Horizontal
Random Bars Vertical
Random











Highlight and copy the text below for your transitional meta tags!

Microsoft IE Page Transitions Copy And Paste Code


Here are all of the special Microsoft Internet Explorer Transition Page Effects. To the best of our knowledge, these work ONLY in IE 5.5 and up. There are several lines of code in each logical grouping and these are ready to copy and put into place on your page. Paste any one of the Microsoft effects in the group below into the <head> section of your page, in the meta tags area, preferably the LAST tag. You can manually change the duration of the effect by changing the Duration=3 (or Duration=3.0) to another number. The larger, the longer the effect. Each whole number is 1 second with optional decimal milliseconds. We advise leaving the comments in place along with the meta tags so that you know what the code is there to do. We have prvided the code with Page-Enter and Page-Exit but you may manually change them to Site-Enter and Site-Exit if you prefer.

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a Zig Zag transition #1 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=3)">
<!-- Properties: duration, gridSizeX, gridSizeY. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is a "+" shaped transition #2 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "PLUS" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "PLUS" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is a star shaped transition #3 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "STAR" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "STAR" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is a square shaped transition #4 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "SQUARE" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "SQUARE" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is an "X" shaped transition #5 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "CROSS X" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "CROSS X" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is a circle shaped transition #6 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "CIRCLE" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "CIRCLE" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is an iris that is a diamond shaped transition #7 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "DIAMOND" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(irisStyle = "DIAMOND" Duration=3)">
<!-- Properties: duration, irisStyle (default="PLUS"), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a slide effect transition #8 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=3)">
<!-- Properties: bands (default=1), duration, slideStyle (default="SLIDE"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a slide effect transition #9 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "HIDE" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "HIDE" Duration=3)">
<!-- Properties: bands (default=1), duration, slideStyle (default="SLIDE"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a slide effect transition #10 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "PUSH" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "PUSH" Duration=3)">
<!-- Properties: bands (default=1), duration, slideStyle (default="SLIDE"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a slide effect transition #11 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "SWAP" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(slideStyle = "SWAP" Duration=3)">
<!-- Properties: bands (default=1), duration, slideStyle (default="SLIDE"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a blinds motion effect transition #12 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)">
<!-- Properties: bands (default=10), Direction (default="down"), Duration (no default). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a barn door effect transition #13 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=3)">
<!-- Properties: duration, motion, orientation (default="vertical"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a pixel fill effect transition #14 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=3)">
<!-- Properties: duration, maxSquare (default=25). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a random dissolving effect transition #15 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=3)">
<!-- Properties: duration. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a checkerboard effect transition #16 -->
<meta http-equiv="Page-Enter" <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=3)">
<!-- Properties: Direction (default="right"), squaresX (default=12), squaresY (default=10). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a fade effect transition #17 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=3)">
<!-- duration, overlap (default=1.0). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a gradient wipe effect transition #18 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=3)">
<!-- Properties: duration, gradientSize (default=0.25), motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a inset effect transition #19 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=3)">
<!-- Properties: duration. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a radial wipe clock effect transition #20 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "CLOCK" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "CLOCK" Duration=3)">
<!-- Properties: duration, wipeStyle (default="CLOCK"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a radial wipe wedge effect transition #21 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "WEDGE" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "WEDGE" Duration=3)">
<!-- Properties: duration, wipeStyle (default="CLOCK"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a radial wipe radial effect transition #22 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "RADIAL" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle = "RADIAL" Duration=3)">
<!-- Properties: duration, wipeStyle (default="CLOCK"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a random bars effect transition #23 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=3)">
<!-- Properties: duration, orientation (default="horizontal"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a random dissolve effect transition #24 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=3)">
<!-- Properties: duration. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a spiral effect transition #25 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=3)">
<!-- Properties: duration, gridSizeX (default=16), gridSizeY (default=16). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a stretch spin effect transition #26 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "SPIN" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "SPIN" Duration=3)">
<!-- Properties: duration, stretchStyle (default="SPIN"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a stretch hide effect transition #27 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "HIDE" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "HIDE" Duration=3)">
<!-- Properties: duration, stretchStyle (default="SPIN"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a stretch push effect transition #28 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "PUSH" Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(stretchStyle = "PUSH" Duration=3)">
<!-- Properties: duration, stretchStyle (default="SPIN"). -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a stips effect transition #29 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=3)">
<!-- Properties: duration, motion. -->
<!-- The lines of code above are for page transition effects. -->

<!-- Provided By http://www.csgnetwork.com/pagetransitiongen.html -->
<!-- This effect is a wheel effect transition #30 -->
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=3)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=3)">
<!-- Properties: duration, spokes (default=4). -->
<!-- The lines of code above are for page transition effects. -->

Property Option Descriptions For The Above Microsoft IE Page Transitions


In the options below, if something is a STRING, the option is within quotes ("") and quotes should be used in your code; if it is an INTEGER, there are no quotes used and none should be in your code. If the option is FLOATING POINT, there are no quotes used and none should be in your code but a decimal value is valid.

bands (integer)
Sets or retrieves the number of strips into which the content is divided during the transition.

Direction (string)
Sets or retrieves the direction of motion in the transition.
Direction:  "up" | "down" | "right" | "left" 

Duration (floating point)
Sets or retrieves the length of time the transition takes to complete. The value is specified in seconds.milliseconds format (0.0000). If only a whole number is used, the value is in seconds (2).

gradientSize
Sets or retrieves the percentage of the object that is covered by the gradient band.

Floating-point that specifies or receives a value that can range from 0.0 to 1.0.0.0 the gradient band has no width as new content is revealed.
0.0 the gradient band has no width as new content is revealed.
0.25 Default. 25% of the object is covered by a gradient band.
1.0 100% of the object is coveredby a gradient band.

gridSizeX
Sets or retrieves the number of grid columns used for the filter. The value can range from 1 to 100.
Integer that specifies or receives the number of grid columns. 16 Default. 

gridSizeY
Sets or retrieves the number of grid rows used for the filter. The value can range from 1 to 100.
Integer that specifies or receives the number of grid rows. 16 Default. 

irisStyle
Sets or retrieves the shape of the Iris filter aperture.
String that specifies or receives one of the following values:
DIAMOND Diamond-shaped aperture.
CIRCLE Circular aperture.
CROSS X-shaped aperture.
PLUS Default. Plus sign-shaped aperture.
SQUARE Square aperture.
STAR Star-shaped aperture.

maxSquare
Sets or retrieves the maximum width in pixels of a pixelated square.
Integer that specifies or receives a width that can range from 2 to 50 pixels.50 Default. 

motion
Sets or retrieves the value that indicates whether new content is revealed from the outside or the inside first.
"out" Default. The transition moves from the center of the object toward the borders of the object.
"in" The transition moves from the borders of the object toward the center.

orientation
Sets or retrieves the value that indicates whether the filter effect is horizontal or vertical.
"horizontal" Transition lines are horizontal.
"vertical" Transition lines are vertical.

overlap
Sets or retrieves the fraction of the transition's duration that both original and new content are displayed.
Floating-point that specifies or receives a value that can range from 0.0 to 1.0.
1.0 Default. 

slideStyle
Sets or retrieves the method used to reveal the new content.
String that specifies or receives one of the following values:
HIDE Default. Slides bands of original content out, exposing new content.
SLIDE bands of original content out, exposing new content.
PUSH Slides bands of new content in, pushing original content out.
SWAP Alternating bands expose new content, or push original content out, at the same time.

spokes
Sets or retrieves the number of wedges that the content is divided into during the transition.
Integer that specifies or receives one of the following possible values:
2 - 20 Number of moving spokes that divide the content into wedges.
4 Default.

squaresX
Sets or retrieves the number of columns for the CheckerBoard transition.
Integer that specifies or receives any positive value greater than or equal to 2. 12 Default. 

squaresY
Sets or retrieves the number of rows for the CheckerBoard transition.
Integer that specifies or receives any positive value greater than or equal to 2. 10 Default. 

stretchStyle
Sets or retrieves the method used to reveal the new content.
String that specifies or receives one of the following possible values:
HIDE Stretches new content over original content from left to right.
PUSH Stretches new content in and squeezes original content out, moving from left to right. This motion resembles a cube rotating from one face to another.
SPIN Default. Stretches new content over original content from the center outward.

wipeStyle
Sets or retrieves the method used to reveal the new content.
String that specifies or receives one of the following possible values.
CLOCK Default. Sweeps around the center, clockwise from the top.
WEDGE Sweeps around the center in both directions from the top.
RADIAL Sweeps from the top to the left side, with one end of the sweep anchored on the upper left corner. 




Leave us a question or comment on Facebook
Search or Browse Our Site
Free Information Calculators and Converters

International Copyright Violation
Registered® Trademark™ and Copyright© 1973 - CSG, Computer Support Group, Inc. and CSGNetwork.Com All Rights Reserved

Home | Advertising | Calculators and Converters | Contact Us | Javascript | Sitemap | Glossary | Top Free Apps