Динамические фильтры HTML
В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В теге применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в теге>.
height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans»>
height : 200; width: 300; visibility : hidden» SRC=world. gif >
Динамическое преобразование картинки с помощью фильтра
Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»
Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тегом ; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тегом ; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0).
Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image 1. filters (0) .Transition=3 , то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):
Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»
При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.
Тип преобразования 23 — случайный выбор и применение одного из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр сработает, когда пользователь загрузит вашу страницу.
Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр — продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.
height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans «>
height : 200; width: 300 ; visibility :
hidden» SRC=world. gif >
Динамическое преобразование картинки с помощью фильтра
Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.
При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в теге . Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.
Иллюстрированный самоучитель по Web-графике
Динамическое преобразование картинки с помощью фильтра:
Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»
Заметим, что Image1 – это имя (идентификатор) элемента-контейнера, заданного тэгом ; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод apply(), который не поддерживается элементом, созданным тэгом ; filters – коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters(0).
Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image1.filters(0).Transition=3, то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):
Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»
При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.
Тип преобразования 23 – случайный выбор и применение одного из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр сработает, когда пользователь загрузит вашу страницу.
Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр – продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.
Иллюстрированный самоучитель по Web-графике
Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает Web-страницу. Есть несколько способов преобразования. Эти способы заранее определены, поэтому от вас лишь требуется указать номер выбранного способа. Ниже приведена таблица с названиями и номерами превращений.
| Тип превращения | Номер фильтра |
|---|---|
| Стягивающийся прямоугольник | 0 |
| Расширяющийся прямоугольник | 1 |
| Стягивающийся круг | 2 |
| Расширяющийся круг | 3 |
| Стирание вверх | 4 |
| Стирание вниз | 5 |
| Стирание вправо | 6 |
| Стирание влево | 7 |
| Вертикальные жалюзи | 8 |
| Горизонтальные жалюзи | 9 |
| Сужающиеся клетки | 10 |
| Закрывающаяся шахматная доска | 11 |
| Случайный наплыв | 12 |
| Вертикальное деление внутрь | 13 |
| Вертикальное деление наружу | 14 |
| Горизонтальное деление внутрь | 15 |
| Горизонтальное деление наружу | 16 |
| Стирание влево вниз | 17 |
| Стирание влево вверх | 18 |
| Стирание вправо вниз | 19 |
| Стирание вправо вверх | 20 |
| Случайные горизонтальные полосы | 21 |
| Случайные вертикальные полосы | 22 |
| Случайный выбор номера (из диапазона 0-22) | 23 |
В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В тэге применен динамический фильтр reveALTrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в тэге >.
Динамические фильтры
С их помощью их можно к элементам страницы применять такие эффекты, как размытие, инвертирование, прозрачность, отражение и т.д.
Статические фильтры можно применять к элементам страницы при помощи CSS:
Таким образом обычно применяют фильтры, действие которых не
будет меняться во времени.
Если нужно изменять какие-то свойства фильтров, то при этом используют JavaScript:
имя_элемента.filters.название_фильтра.свойство = «значение»; Объект filters содержит все свойства и методы примененных к элементу фильтров.
Если посредством скрипта необходимо к элементу применить сам фильтр, а не его свойства, то следует пользоваться таким синтаксисом:
элемент.style.filter = «название_фильтра(свойство=значение. )»
Фильтр устанавливает прозрачность элемента.
- 0 — Сплошная прозрачность
- 1 — Линейная градиентная прозрачность
- 2 — Радиальная градиентная прозрачность
- 3 — Прямоугольная градиентная прозрачность
Фильтр — эффект тени. Фильтр применяется только к элементам, содержащим текст.
| enabled | false не применяется, true — применяется. |
| color | Стиль — цвет тени. |
| offX | Расстояние в пикселах от элемента до тени по оси X. Положительные — тень вправо, отрицательные — влево. |
| offY | То же по оси Y. Положительные — тень вниз, отрицательные — вверх. |
Горизонтальный и вертикальный поворот
Инвертирует цвета (элемента).
Размытие элемента под указанным углом.
| enabled | true или false |
| direction | Угол размытия. Угол кратен 45 градусам. |
| strength | Сила размытия. Диапазон 0 — 100; |
Фильтр — эффект размытой тени.
glow filter (свечение)
xray filter (x-лучи)
Динамические фильтры, в отличие от статических, предназначены для плавного перехода элемента из одного состояния видимости в другой за определенный промежуток времени.(Статическими тоже можно сделать плавный переход, но это требует больших усилий нежели воспользоваться динамическими)
Существует только два динамических фильтра: blendTrans и revealTrans.
Рассмотрим сначала фильтр blendTrans и начнем с его методов и свойств
- 0 — если фильтр остановлен
- 1 — если фильтр применен
- 2 — если фильтр выполняется
Ниже представлен пример, где почти все методы и свойства этого фильтра применены.