22 декабря 2015
17 июля 2008
7
Плавное изменение содержимого страницы
Если читатели открывали наш блог в 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. <meta> теги вставляются в заголовок страницы (между <head> и </head>);
5. Такие мета-теги работают только в IE;
6. Не обязательно вставлять и Page-Enter и Page-Exit. Можно оба, а можно и только один из них. Смотря чего вы хотите добиться.
7. Ссылки на внешние css-файлы должны быть определены после мета-тегов. Мета-теги вообще лучше вставлять сразу после открывающего тега <meta>
Возможные фильтры
| Проявление (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>Заключение
Хочу заметить, что использовать такие переходы надо с умом. Согласен, что на первый взгляд они давольно-таки привлекательные, но при неразумном применении, они могу быть весьма и весьма раздражительными. Не советую использовать большие значения для длительности переходов, применять разные фильтры для одного сайта.
И все же, никто не запретит вам добавить привлекательности и уникальности вашему ресурсу. Удачи!
А что касается ИЕ и вашего сайта, то сами хоть открывали его в ИЕ6? Откройте и порадуйтесь кнопкам-кружочкам перехода по страницам.