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

    Если читатели открывали временно.нет в 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>
      

      Заключение


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

      И все же, никто не запретит вам добавить привлекательности и уникальности вашему ресурсу. Удачи!

      Ссылки в тему



      То же самое на vremenno.net
    Share post

    Similar posts

    Comments 3

      0
      на старых сайтах мелкософта использовался фильтр градиента. ам где шапка, переход от белого к синему.
        +1
        Главная проблема этих переходов — весь контент страницы должен быть загружен, и только после этого происходит отображение новой страницы. Если у пользователя медленный канал, а на страницах дофига графики, эти переходы будут будут ассоциироваться у него с подвисшим интернетом и он попытается либо пощелкать на ссылки еще, либо закрыть сайт вообще. Штука только для быстрых сайтов и быстрых каналов. Хотя и на достаточно быстрых московских каналах не сразу понимаешь, почему такие большие лаги. ИМХО если замутили такую штуку, надо добавлять еще какой-нибудь "прелоадер", на основании которого пользователь поймет, грузится ли страничка или нет.
          0
          >>Несмотря на то, что данный прием работает только в IE, стоит знать, как делаются такие переходы.
          Данный приём - да, а вот данный эффект лучше реализовыввать кроссбраузерно. Сделать это не так сложно. Лично для меня, если что-то работает только в IE, то карма разработчика жирно минусуется. Не на Хабре, конечно, а так, по жизни, в голове.

          Only users with full accounts can post comments. Log in, please.