Плавное изменение содержимого страницы

Если читатели открывали временно.нет в IE, в чем я, основываясь на статистике, сомневаюсь, то наверняка замечали плавный эффект при переходе со страницы на страницу.

Несмотря на то, что данный прием работает только в IE, стоит знать, как делаются такие переходы.


Для того, чтобы добиться такого эффекта на временно.нет вставлен следующий мета-тег:

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

Вообще говоря, есть два события, когда эффект может быть вызван: открытие страницы и уход со страницы.
Соответствующие мета-теги выглядят так:

<meta http-equiv="Page-Enter" content=фильтр_перехода >
<meta http-equiv="Page-Exit" content=фильтр_перехода >

Ликбез

1. Page-Enter определяет какой фильтр применить при открытии страницы;
2. Page-Exit определяет какой фильтр применить при уходе со страницы;
3. фильтр_перехода — это один из фильтров с параметрами. Полный список фильтров можно посмотреть в msdn;
4. теги вставляются в заголовок страницы (между и );
   Такие мета-теги работают только в IE;
   Не обязательно вставлять и Page-Enter и Page-Exit. Можно оба, а можно и только один из них. Смотря чего вы хотите добиться.
   Ссылки на внешние css-файлы должны быть определены после мета-тегов. Мета-теги вообще лучше вставлять сразу после открывающего тега
   
   

   Возможные фильтры

   
   

   Проявление (Fade)	blendTrans(duration=1)
   Сужающийся блок (Box In)	revealTrans(duration=1, transition=0)
   Расширяющийся блок (Box Out)	revealTrans(duration=1, transition=1)
   Сужающийся круг (Circle In)	revealTrans(duration=1, transition=2)
   Расширяющийся круг (Circle Out)	revealTrans(duration=1, transition=3)
   Открытие снизу вверх (Wipe Up)	revealTrans(duration=1, transition=4)
   Горизонтальное многоблочное открытие (Horizontal Checkerboard)	revealTrans(duration=1, transition=10)
   Вертикальное многоблочное открытие (Vertical Checkerboard)	revealTrans(duration=1, transition=11)
   Диагональное открытие (Strips)	revealTrans(duration=1, transition=20)
   Шторы (Barn)	revealTrans(duration=1, transition=14)
   Растворение (Dissolve)	revealTrans(duration=1, transition=12)

   
   Здесь можно посмотреть как это выглядит.
   
   

   Дополнительные DirectX-фильтры

   
   

   Pixelate	progid:DXImageTransform.Microsoft.Pixelate(duration=3)
   GradientWipe	progid:DXImageTransform.Microsoft.gradientWipe(duration=1)
   Spiral	progid:DXImageTransform.Microsoft.Spiral(duration=3, GridSizeX=205, GridSizeY=205)
   Wheel	progid:DXImageTransform.Microsoft.Wheel(duration=3, spokes=10)
   Radial Wipe	progid:DXImageTransform.Microsoft.RadialWipe(duration=3)
   Iris	progid:DXImageTransform.Microsoft.Iris(duration=3)

   
   

   Еще

   
   Возможно, вас заинтересуют такие дополнительные мета-теги:
   

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

   
   

   Заключение

   
   Хочу заметить, что использовать такие переходы надо с умом. Согласен, что на первый взгляд они давольно-таки привлекательные, но при неразумном применении они могу быть весьма и весьма раздражительными. Не советую использовать большие значения для длительности переходов или применять разные фильтры для одного сайта.
   
   И все же, никто не запретит вам добавить привлекательности и уникальности вашему ресурсу. Удачи!
   
   

   Ссылки в тему

   
   
   • Вся информация, касающаяся фильтров и переходов в msdn;
   • Примеры использования фильтров.
   
   То же самое на vremenno.net