Плавне зміна вмісту сторінки, Різне, Інтернет-технології, статті

Якщо читачі відкривали наш блог в IE, в чому я (грунтуючись на статистиці) сумніваюся, то напевно помічали плавний ефект при переході зі сторінки на сторінку.


Незважаючи на те, що даний прийом працює тільки в IE, зважаючи лідерства Ослика на ринку браузерів варто знати, як робляться такі переходи.


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

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

Взагалі кажучи, є дві події, коли ефект може бути викликаний: відкриття сторінки і відхід зі сторінки.


Відповідні мета-теги виглядають так:

 

Лікнеп


1. Page-Enter визначає який фільтр застосувати при відкритті сторінки;


2. Page-Exit визначає який фільтр застосувати при догляді зі сторінки;


3. [Фільтр переходу] – це один з фільтрів з параметрами. Повний список фільтрів можна подивитися в msdn;


4. теги вставляються в заголовок сторінки (між і );


5. Такі мета-теги працюють тільки в IE;


6. Не обов’язково вставляти і Page-Enter і Page-Exit. Можна обидва, а можна і тільки один з них. Дивлячись чого ви хочете добитися.


7. Посилання на зовнішні 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>

Висновок


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


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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*