⬆️ ⬇️

Smooth change of page content

If readers opened temporarily. No in IE, which I, based on statistics, I doubt, then surely noticed a smooth effect when moving from page to page.



Despite the fact that this technique only works in IE, you should know how such transitions are made.





In order to achieve such an effect on temporarily. The following meta tag is inserted:

  <meta http-equiv = "Page-Exit" content = "progid: DXImageTransform.Microsoft.Fade (duration = .5)" /> 


Generally speaking, there are two events when the effect can be triggered: opening the page and leaving the page.

Relevant meta tags look like this:

 <meta http-equiv = "Page-Enter" content = transition filter>
 <meta http-equiv = "Page-Exit" content = transition filter> 


Likbez

  1. Page-Enter determines which filter to apply when opening the page;
  2. Page-Exit determines which filter to apply when leaving the page;
  3. _ is one of the filters with parameters. The full list of filters can be viewed in msdn;
  4. ( );

    Such meta tags work only in IE;

    It is not necessary to insert both Page-Enter and Page-Exit . You can both, and you can only one of them. Watching what you want to achieve.

    Links to external css-files must be defined after the meta tags. Meta tags are generally better to insert immediately after the opening tag.

    ')

    Optional filters



    Manifestation (Fade)blendTrans (duration = 1)
    Taper Block (Box In)revealTrans (duration = 1, transition = 0)
    Expanding block (box out)revealTrans (duration = 1, transition = 1)
    Tapering Circle (Circle In)revealTrans (duration = 1, transition = 2)
    Circle OutrevealTrans (duration = 1, transition = 3)
    Wipe Up openingrevealTrans (duration = 1, transition = 4)
    Horizontal Multiblock Opening (Horizontal Checkerboard)revealTrans (duration = 1, transition = 10)
    Vertical multiblock opening (Vertical Checkerboard)revealTrans (duration = 1, transition = 11)
    Diagonal opening (Strips)revealTrans (duration = 1, transition = 20)
    Curtains (Barn)revealTrans (duration = 1, transition = 14)
    Dissolve (Dissolve)revealTrans (duration = 1, transition = 12)


    Here you can see how it looks.



    Additional DirectX Filters



    Pixelateprogid: DXImageTransform.Microsoft.Pixelate (duration = 3)
    GradientWipeprogid: DXImageTransform.microsoft.gradientWipe (duration = 1)
    Spiralprogid: DXImageTransform.Microsoft.Spiral (duration = 3, GridSizeX = 205, GridSizeY = 205)
    Wheelprogid: DXImageTransform.Microsoft.Wheel (duration = 3, spokes = 10)
    Radial wipeprogid: DXImageTransform.Microsoft.RadialWipe (duration = 3)
    Irisprogid: DXImageTransform.Microsoft.Iris (duration = 3)


    Still



    You might be interested in such additional meta tags:

     <meta http-equiv = "Site-Enter" content = transitionFilter>
     <meta http-equiv = "Site-Exit" content = transitionFilter>
    


    Conclusion



    I want to note that you need to use such transitions wisely. I agree that at first glance they are pretty attractive, but with unwise use they can be very, very irritable. I do not recommend using large values ​​for the duration of transitions or use different filters for one site.



    And yet, no one will forbid you to add attractiveness and uniqueness to your resource. Good luck!



    Links to the topic





    The same on vremenno.net

Source: https://habr.com/ru/post/29374/



All Articles