Панорамная галерея
Активный элемент в 3D
Контейнер активного элемента в 3D
3D-модель
Просмотр 3D-моделей
Добавить в Календарь
Аудио
Круговая галерея
Временная точка
Смена даты
Навигация по галерее
Обычное объявление
Жест
Объявление Google
Активный элемент
Окно iframe
Изображение
Графическая кнопка
Эффект изображения
Визуальный эффект "До и после"
Визуальный эффект "Дыхание"
Визуальный эффект "Появление"
Визуальный эффект "Волна"
Карта
Страница
Группа страниц
Параллакс
Эффекты частиц
Частицы
Таблица спрайтов
Рейтинги
Просмотр улиц
Перелистываемая галерея
Эффект вращения
Интерактивная область
Кнопка вызова/SMS
Галерея переходов
Жалюзи
Дверь
Затемнение
Диафрагма
Смещение
Радиальное стирание
Поворот
Секторы
Смещение с разделением
Стирание с полосами
Венецианские жалюзи
Стирание
Зигзаг
Видео
YouTube
gwd-360gallery
Объект галереи, в котором можно показывать вращающиеся объекты.
Свойства
| Название | Описание |
|---|---|
images:string |
Разделенный запятыми список URL кадров галереи. |
autoplay:boolean |
Автоматический запуск показа изображений при загрузке галереи. |
wrap:boolean |
Пользователь может по кругу пролистывать все кадры галереи без остановки. |
События
| Название | Описание |
|---|---|
firstinteraction |
Отправляется, когда пользователь впервые взаимодействует с галереей. |
allframesviewed |
Отправляется, когда все кадры галереи показаны хотя бы один раз. |
allframesloaded |
Отправляется, когда все кадры галереи загружены. |
frameshown |
Отправляется при показе нового кадра. |
frameactivated |
Отправляется в начале активации нового кадра, даже если он ещё не виден. |
frametap |
Отправляется, когда пользователь касается кадра. |
Методы
| Название | Описание |
|---|---|
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
Анимировать указанный кадр. |
rotateOnce(opt_duration:number, opt_direction:string) |
Повернуть объект в галерее один раз. |
goForwards() |
Перейти на один кадр вперед. |
goBackwards() |
Перейти на один кадр назад. |
gwd-3d-hotspot
Элемент-аннотация на 3D-модели.
Свойства
| Название | Описание |
|---|---|
data-position:string |
Расположение активного элемента. |
data-normal:string |
Нормальный вектор активного элемента. |
hotspot-name:string |
Название активного элемента. |
hotspot-title:string |
Заголовок подсказки. |
hotspot-description:string |
Описание подсказки. |
hide-infocard:boolean |
Должна ли подсказка быть скрытой. |
gwd-3d-hotspot-container
Контейнер для аннотации на 3D-модели.
Свойства
| Название | Описание |
|---|---|
up-image:file |
URL изображения 3D-элемента в ненажатом состоянии. |
over-image:file |
URL изображения 3D-элемента, когда на него наведен указатель. |
down-image:file |
URL изображения 3D-элемента в нажатом состоянии. |
gwd-3d-model
Окно 3D-просмотра.
Свойства
| Название | Описание |
|---|---|
id-url:download |
URL или идентификатор 3D-модели. |
data-gwd-refresh-assets:string |
Атрибут, по которому Google Web Designer определяет, нужно ли обновить 3D-объект. |
glass:boolean |
Делает 3D-модель прозрачной. |
src:string |
Модель для показа. |
transparent:boolean |
Выбор прозрачного фона для 3D-модели. |
gesture-cue-icon:file |
Значок метки жеста. |
gesture-cue-text:string |
Текст, который показывается под значком метки жеста. |
gesture-cue-duration:number |
Время (в секундах), на протяжении которого показывается анимация метки жеста. Значение -1 указывает на то, что ограничение по времени отсутствует. |
События
| Название | Описание |
|---|---|
scene-rendered |
Отправляется при первой отрисовке 3D-модели. |
camera-changed |
Отправляется при изменении свойств 3D-камеры. Все текущие свойства камеры содержатся в объекте event.detail. |
hotspot-clicked |
Отправляется при нажатии на активный элемент. Название нажатого активного элемента содержится в объекте event.detail. |
interaction-start |
Отправляется, когда пользователь начинает взаимодействовать с 3D-моделью. |
interaction-end |
Отправляется, когда пользователь перестает взаимодействовать с 3D-моделью. |
Методы
| Название | Описание |
|---|---|
setYaw(yaw:number) |
Задать угол отклонения в градусах без анимации с учетом ограничений камеры. |
setTargetYaw(targetYaw:number) |
Задать конечное отклонение в градусах с учетом вращения или ограничений камеры (в диапазоне от -360 до 360 градусов). |
setTargetPitch(targetPitch:number) |
Задать целевой наклон в градусах. |
incrementTargetPitch(pitchDelta:number) |
Увеличить значение целевого наклона на дельту. |
setTargetZoom(targetZoom:number) |
Задать целевой масштаб в метрах. |
incrementTargetZoom(zoomDelta:number) |
Увеличить целевой масштаб в метрах. |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Задать целевое вращение в метрах. |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Задать целевое локальное панорамирование в метрах. |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Задать цвет материала. |
playAnimation(animationName:string) |
Воспроизвести анимацию. |
pauseAnimation(animationName:string) |
Приостановить анимацию. |
setAnimationTime(animationName:string, animationTime:number) |
Задать время анимации в секундах. |
lookAtHotspot(hotspotName:string) |
Направить камеру на заданный активный элемент. |
gwd-3d-model-viewer
Компонент, который позволяет добавить в объявление 3D-модель.
Свойства
| Название | Описание |
|---|---|
src:file |
Файл 3D-модели. |
gesture-cue-icon:file |
Значок метки жеста. |
gesture-cue-text:string |
Текст, который показывается под значком метки жеста. |
gesture-cue-duration:number |
Время (в секундах), на протяжении которого показывается анимация метки жеста. Значение -1 указывает на то, что ограничение по времени отсутствует. |
skybox-image:file |
Фоновое изображение 3D-модели. |
environment-image:file |
Управляет отражением среды 3D-модели. |
События
| Название | Описание |
|---|---|
scene-rendered |
Отправляется при первой отрисовке 3D-модели. |
camera-changed |
Отправляется при изменении свойств 3D-камеры. Все текущие свойства камеры содержатся в объекте event.detail. |
hotspot-clicked |
Отправляется при нажатии на активный элемент. Название нажатого активного элемента содержится в объекте event.detail. |
interaction-start |
Отправляется, когда пользователь начинает взаимодействовать с 3D-моделью. |
interaction-end |
Отправляется, когда пользователь перестает взаимодействовать с 3D-моделью. |
Методы
| Название | Описание |
|---|---|
setYaw(yaw:number) |
Задать угол отклонения в градусах без анимации с учетом ограничений камеры. |
setTargetYaw(targetYaw:number) |
Задать конечное отклонение в градусах с учетом вращения или ограничений камеры (в диапазоне от -360 до 360 градусов). |
setTargetPitch(targetPitch:number) |
Задать целевой наклон в градусах. |
incrementTargetPitch(pitchDelta:number) |
Увеличить значение целевого наклона на дельту. |
setTargetZoom(targetZoom:number) |
Задать целевой масштаб в метрах. |
incrementTargetZoom(zoomDelta:number) |
Увеличить целевой масштаб в метрах. |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Задать целевое вращение в метрах. |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Задать целевое локальное панорамирование в метрах. |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Задать цвет материала. |
playAnimation(animationName:string) |
Воспроизвести анимацию. |
pauseAnimation(animationName:string) |
Приостановить анимацию. |
setAnimationTime(animationName:string, animationTime:number) |
Задать время анимации в секундах. |
gwd-addtocalendar
Этот компонент позволяет добавлять события в календарь.
Свойства
| Название | Описание |
|---|---|
event-title:string |
Название события, которое будет отображаться в календаре пользователя. |
start-date:string |
Дата начала события. |
start-time:string |
Время начала события (в 24-часовом формате). |
end-date:string |
Дата окончания события. |
end-time:string |
Время окончания события (в 24-часовом формате). |
timezone:string |
Часовой пояс для события. Если свойство задано, время будет изменяться с изменением часового пояса пользователя. |
location:string |
Место проведения события. |
description:string |
Описание события. |
icalendar:boolean |
Позволяет выбрать, использовать ли файл iCalendar. |
google:boolean |
Позволяет выбрать, использовать ли Google Календарь. |
windows-live:boolean |
Позволяет выбрать, использовать ли Календарь Windows Live. |
yahoo:boolean |
Позволяет выбрать, использовать ли Yahoo Calendar. |
bg-color:string |
Шестнадцатеричный код цвета фона в раскрывающемся меню. |
font-color:string |
Шестнадцатеричный код цвета шрифта в раскрывающемся меню. |
font-family:string |
Название шрифта в раскрывающемся меню. |
font-size:string |
Размер шрифта в раскрывающемся меню. |
font-weight:string |
Насыщенность шрифта в раскрывающемся меню. |
highlight-color:string |
Шестнадцатеричный код цвета, которым выделяется выбранный календарь в раскрывающемся меню. |
gwd-audio
Компонент с интерфейсом HTMLAudioElement.
Свойства
| Название | Описание |
|---|---|
autoplay:boolean |
Позволяет выбрать, воспроизводить ли аудиозапись автоматически при загрузке страницы. |
loop:boolean |
Позволяет выбрать, повторять ли воспроизведение аудиозаписи. |
muted:boolean |
Позволяет выбрать, отключать ли звук. |
controls:boolean |
Позволяет выбрать, активировать ли стандартные элементы управления встроенного проигрывателя. |
sources:file |
Разделенный запятыми список URL аудиозаписей в разных форматах. |
События
| Название | Описание |
|---|---|
play |
Отправляется, когда пользователь возобновляет воспроизведение медиафайла после паузы. |
pause |
Отправляется, когда пользователь приостанавливает воспроизведение. |
playing |
Отправляется после начала воспроизведения медиафайла (в первый раз, после паузы, после окончания и повторного воспроизведения). |
ended |
Отправляется после завершения воспроизведения. |
volumechange |
Отправляется после изменения громкости звука (если изменить настройки громкости либо атрибут свойства muted). |
seeked |
Отправляется после завершения поиска. |
waiting |
Отправляется, когда запрошенная операция (например, воспроизведение) задерживается до завершения другой операции (например, поиска). |
Методы
| Название | Описание |
|---|---|
mute() |
Отключить или включить звук. |
pause() |
Приостановить воспроизведение аудиозаписи. |
play() |
Воспроизвести аудиозапись. |
replay() |
Воспроизвести аудиозапись ещё раз. |
seek(time:number) |
Перейти к указанному времени в аудиозаписи. |
gwd-carouselgallery
Объект галереи, в котором можно перелистывать кадры.
Свойства
| Название | Описание |
|---|---|
images:string |
Разделенный запятыми список URL кадров галереи. |
groups:string |
Разделенный запятыми список идентификаторов групп. |
transition-duration:number |
Скорость анимации в галерее в миллисекундах. |
start-frame:number |
Номер изображения, которое должно показываться первым. |
autoplay:boolean |
Позволяет выбрать, воспроизводить ли кадры автоматически один раз. |
has-navigation:boolean |
Позволяет выбрать, включать ли элементы навигации по галерее автоматически. |
navigation-thumbnails:boolean |
Позволяет выбрать, использовать ли для навигации эскизы вместо точек. |
navigation-highlight:color |
CSS-код цвета, которым выделяется активный кадр на панели навигации. |
scaling:string |
Принцип, по которому изображение будет масштабироваться в кадре. |
frame-width:number |
Ширина панели содержимого. |
frame-height:number |
Высота панели содержимого. |
neighbor-rotation-y:number |
Вращение по оси Y панелей, которые находятся рядом с текущей центральной панелью. Используется для наклона соседних панелей. |
neighbor-translation-x:number |
Преобразование по оси X панелей, которые находятся рядом с текущей центральной панелью. Используется для выравнивания соседних панелей. |
neighbor-translation-y:number |
Преобразование по оси Y панелей, которые находятся рядом с текущей центральной панелью. |
neighbor-translation-z:number |
Преобразование по оси Z панелей, которые находятся рядом с текущей центральной панелью. |
exit-urls:string |
Разделенный запятыми список URL перехода, соответствующих каждому кадру галереи. |
show-reflection:boolean |
Позволяет выбрать, показывать ли отражение в формате CSS3. |
pause-front-media:boolean |
Позволяет выбрать, приостанавливать ли воспроизведение мультимедийного элемента (например, видео или аудио) в предыдущем кадре при смене кадра. |
resume-next-media:boolean |
Позволяет выбрать, возобновлять ли воспроизведение мультимедийного элемента (например, видео или аудио) в новом кадре при смене кадра. |
События
| Название | Описание |
|---|---|
firstinteraction |
Отправляется, когда пользователь впервые взаимодействует с галереей. |
allframesviewed |
Отправляется, когда все кадры галереи показаны хотя бы один раз. |
allframesloaded |
Отправляется, когда все кадры галереи загружены. |
autoplayended |
Отправляется после завершения автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false. |
frameshown |
Отправляется при показе нового кадра. |
frameactivated |
Отправляется в начале активации нового кадра, даже если он ещё не виден. |
frameautoplayed |
Отправляется после активации кадра для автовоспроизведения. Может запускаться чаще, чем frameshown, поскольку активируется отдельно для каждой группы одновременно отображаемых кадров. |
frametap |
Отправляется, когда пользователь касается кадра. |
reachleftend |
Отправляется, когда достигнут левый край галереи. |
reachrightend |
Отправляется, когда достигнут правый край галереи. |
trackstart |
Отправляется, когда начинается перетаскивание касанием или мышью. |
track |
Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием. |
trackend |
Отправляется, когда завершается перетаскивание касанием или мышью. |
Методы
| Название | Описание |
|---|---|
goToFrame(index:number, opt_animate:string) |
Перейти к указанному кадру. |
goForwards(opt_animate:string) |
Перейти к следующему кадру (если имеется). |
goBackwards(opt_animate:string) |
Перейти к предыдущему кадру. |
rotateOnce(opt_duration:number, opt_direction:string) |
Показать все кадры в галерее по одному разу. |
stopRotation() |
Прекратить автоматическое перелистывание. |
gwd-cuepoint
Прикрепляемый к видео компонент, который активирует событие в определенный момент воспроизведения.
Свойства
| Название | Описание |
|---|---|
time:number |
Время активации события в секундах. |
События
| Название | Описание |
|---|---|
cuepoint |
Отправляется, когда воспроизведение медиафайла достигает времени, указанного во временной точке. |
Методы
| Название | Описание |
|---|---|
seek() |
Перейти ко времени, указанному во временной точке. |
setTime(time:number) |
Задать время временной точки. |
gwd-dateswap
Компонент "Смена даты" отображает элементы в зависимости от того, совпадает ли текущая дата с указанным диапазоном.
Свойства
| Название | Описание |
|---|---|
from_date:string |
Дата в формате RFC2822 или ISO 8601. |
to_date:string |
Дата в формате RFC2822 или ISO 8601. |
События
| Название | Описание |
|---|---|
before |
Отправляется, когда текущая дата предшествует дате, указанной в свойстве from_date (но не соответствует ей). |
during |
Отправляется, когда текущая дата находится в промежутке между from_date и to_date (включительно). |
after |
Отправляется, когда текущая дата находится после даты, указанной в свойстве to_date (но не соответствует ей). |
Методы
| Название | Описание |
|---|---|
checkDate() |
Сравнить текущую дату с указанным диапазоном. |
gwd-gallerynavigation
Панель навигации для галерей в Google Web Designer.
Свойства
| Название | Описание |
|---|---|
for:string |
Разделенный запятыми список URL кадров галереи. |
highlight:color |
CSS-код цвета, которым выделяется активный кадр на панели навигации. |
use-thumbnails:boolean |
Позволяет выбрать, использовать ли для навигации эскизы вместо точек. |
gwd-genericad
Этот компонент реализует контейнер обычного объявления.
События
| Название | Описание |
|---|---|
adinitialized |
Отправляется непосредственно перед тем, как элемент "Обычное" отобразит содержимое объявления. |
Методы
| Название | Описание |
|---|---|
initAd() |
Запустить объявление, когда будут получены соответствующие события от активатора. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Перейти к развернутому объявлению. Если идентификатор страницы не указан, объявление переходит к странице по умолчанию. |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
Выйти из объявления и, если необходимо, свернуть его. |
gwd-gesture
Этот компонент позволяет регистрировать ряд жестов.
Свойства
| Название | Описание |
|---|---|
touch-action:string |
Определяет, как будут интерпретироваться касания. Допустимые значения: auto, none, pan-x и pan-y. По умолчанию используется значение none. |
События
| Название | Описание |
|---|---|
hover |
Отправляется, когда указатель или касание пользователя входят в границы компонента. |
hoverend |
Отправляется, когда указатель или касание пользователя покидают границы компонента. |
trackstart |
Отправляется, когда начинается перетаскивание касанием или мышью. |
track |
Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием. |
trackend |
Отправляется, когда завершается перетаскивание касанием или мышью. |
tap |
Отправляется, когда регистрируется касание или нажатие мышью. |
swipeleft |
Отправляется, когда пользователь листает влево. |
swiperight |
Отправляется, когда пользователь листает вправо. |
swipeup |
Отправляется, когда пользователь листает вверх. |
swipedown |
Отправляется, когда пользователь листает вниз. |
gwd-google-ad
Этот компонент реализует контейнер объявления Google.
Свойства
| Название | Описание |
|---|---|
polite-load:boolean |
Позволяет выбрать, должна ли соблюдаться в объявлении семантика управляемой загрузки. |
fullscreen:boolean |
Позволяет выбрать, будет ли объявление пытаться переходить в полноэкранный режим. |
События
| Название | Описание |
|---|---|
adinitialized |
Отправляется непосредственно перед тем, как элемент отобразит содержимое объявления. |
expandstart |
Отправляется, когда активатор инициирует событие "Начало раскрытия". |
expandfinish |
Отправляется, когда активатор инициирует событие "Конец раскрытия". |
collapsestart |
Отправляется, когда активатор инициирует событие "Начало свертывания". |
collapsefinish |
Отправляется, когда активатор инициирует событие "Конец свертывания". |
fullscreensupport |
Отправляется, если поддерживается полноэкранный режим. |
dynamicelementsready |
Отправляется после того, как к содержимому объявления были применены динамические данные. |
hostpagescroll |
Отправляется, когда активатор запускает прокрутку родительской страницы. |
Методы
| Название | Описание |
|---|---|
initAd() |
Запустить объявление, когда будут получены соответствующие события от активатора. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Перейти к развернутому объявлению. Если идентификатор страницы не указан, объявление переходит к странице по умолчанию. |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Выйти из объявления и, если необходимо, свернуть его. |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Перейти из объявления на указанный URL независимо от значения, заданного в DoubleClick Studio. Объявление сворачивается, если для opt_collapseOnExit задано значение true. |
incrementCounter(metric:string, opt_isCumulative:boolean) |
Отслеживать событие счетчика. |
startTimer(timerId:string) |
Запустить таймер событий. |
stopTimer(timerId:string) |
Остановить таймер событий. |
reportManualClose() |
Записать, что вручную было закрыто объявление одного из следующих типов: плавающее, всплывающее, раскрывающееся, объявление на странице со всплывающими или плавающими элементами. Этот метод – аналог Enabler.reportManualClose. |
gwd-hotspot
Компонент, который показывает и скрывает активный элемент в определенное время воспроизведения видео.
Свойства
| Название | Описание |
|---|---|
show-time:number |
Время, когда активный элемент появляется (в секундах). |
hide-time:number |
Время, когда активный элемент исчезает (в секундах). |
left:string |
Левое положение активного элемента над видео относительно ширины видеокадра (например, 5 %). |
top:string |
Верхнее положение активного элемента над видео относительно высоты видеокадра (например, 5 %). |
width:string |
Ширина активного элемента пропорционально видео относительно ширины видеокадра. |
height:string |
Высота активного элемента видео относительно высоты видеокадра. |
События
| Название | Описание |
|---|---|
hotspotshown |
Отправляется, когда активный элемент появляется. |
hotspothidden |
Отправляется, когда активный элемент исчезает. |
Методы
| Название | Описание |
|---|---|
show(showHide:boolean) |
Изменить видимость активного элемента. |
seek(showHide:boolean) |
Установить время воспроизведения видео на время, когда активный элемент исчезает или появляется. |
setTimes(showTime:number, hideTime:number) |
Задать время появления и исчезновения активного элемента. |
gwd-iframe
Компонент с интерфейсом HTMLIframeElement.
Свойства
| Название | Описание |
|---|---|
source:string |
URL окна iframe. Заменяет атрибут свойства src в стандартном элементе "Изображение". |
scrolling:string |
Позволяет выбрать, показывать ли в окне iframe полосы прокрутки. |
События
| Название | Описание |
|---|---|
iframeload |
Отправляется, когда окно iframe загрузилось. |
Методы
| Название | Описание |
|---|---|
setUrl(url:string) |
Изменить URL окна iframe и сразу загрузить его. |
gwd-image
Компонент с интерфейсом HTMLImageElement, который позволяет откладывать загрузку изображения из источника.
Свойства
| Название | Описание |
|---|---|
source:file |
Источник изображения. Заменяет атрибут свойства src в стандартном элементе "Изображение". |
alt:string |
Альтернативный текст для изображения. |
scaling:string |
Принцип, по которому изображение будет масштабироваться во фрейме. |
alignment:string |
Как изображение будет выравниваться в области просмотра. |
focalpoint:string |
Позволяет указать пиксельные координаты X и Y для точки фокуса изображения. |
disablefocalpoint:boolean |
Отключает точку фокуса, заданную с помощью атрибута focalpoint (применяется в Google Web Designer). |
gwd-imagebutton
Этот компонент позволяет разместить на экране кнопку с тремя визуальными состояниями: "кнопка не нажата", "на кнопку наведен указатель" и "кнопка нажата".
Свойства
| Название | Описание |
|---|---|
up-image:file |
URL изображения кнопки в ненажатом состоянии. |
over-image:file |
URL изображения кнопки, когда на нее наведен указатель. |
down-image:file |
URL изображения кнопки в нажатом состоянии. |
bgcolor:string |
Цвет фона кнопки. |
alignment:string |
Как изображение будет выравниваться в области просмотра. |
scaling:string |
Как изображения будут адаптироваться к размеру родительского контейнера. |
disabled:boolean |
Позволяет выбрать, отключать ли кнопку. |
События
| Название | Описание |
|---|---|
imagebuttonloaded |
Отправляется, когда все изображения загружены. |
Методы
| Название | Описание |
|---|---|
toggleEnable() |
Включить или отключить кнопку. |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
Задать источники изображений для всех состояний кнопки. |
gwd-image-effect
Компонент "Эффект изображения".
Свойства
| Название | Описание |
|---|---|
scaling:string |
Принцип, по которому изображение будет масштабироваться во фрейме. |
time-limit:number |
Ограничение по продолжительности анимации. Значение -1 указывает на то, что ограничение по времени отсутствует. |
settings:string |
Запускает диалоговое окно настроек компонента. |
images:string |
Разделенный запятыми список URL, соответствующих эффектам изображений. |
События
| Название | Описание |
|---|---|
autoplayended |
Отправляется, когда автовоспроизведение заканчивается из-за достижения ограничения по времени. |
Методы
| Название | Описание |
|---|---|
play() |
Воспроизвести анимацию. |
pause() |
Приостановить анимацию. |
gwd-before-and-after
Эффект, который позволяет сравнить два изображения: до и после обработки.
gwd-breathe
Эффект "Дыхание" гибко расширяет и сокращает изображение.
gwd-reveal
Эффект "Появление" показывает соответствующую часть второго изображения в круглой зоне фокуса.
gwd-wave
Эффект "Волна" анимирует части изображения в форме волны.
gwd-map
Этот компонент добавляет в интерфейс HTMLElement возможность упаковывать вызовы API Google Карт.
Свойства
| Название | Описание |
|---|---|
api-key:string |
Ключ Google API. Подробнее: https://developers.google.com/maps/documentation/javascript/get-api-key. |
query:string |
Поисковый запрос для местоположений, которые возвращает Google Places API. |
start-latitude:decimal |
Широта начальной точки. Значение от -90 до 90 (градусов). |
start-longitude:decimal |
Долгота начальной точки. Значение в пределах –180 и 180 (градусов). |
request-user-location:boolean |
Позволяет выбрать, запрашивать ли местоположение пользователя. Если выбрано значение true, пользователю будет отправлен запрос на предоставление этой информации. |
client-id:string |
Идентификатор премиум-пользователя Google Карт. |
search-radius:number |
Минимальный радиус поиска места в метрах. |
result-limit:number |
Максимальное количество результатов поиска по одному запросу. |
start-zoom:number |
Начальный уровень масштабирования в единицах, принятых в API Google Карт. По умолчанию равен 16, что соответствует уровню микрорайона. |
marker-src:string |
Название файла изображения метки в виде спрайта, содержащего компоненты off, on и shadow. |
gps-src:string |
Название файла с изображением синей точки GPS-координат пользователя. |
msg-start-position-prompt:string |
Локализованный запрос выбрать начальное местоположение. |
msg-gps-button-label:string |
Локализованный текст кнопки, с помощью которой пользователь может запросить свое местоположение в API определения местоположения. |
msg-manual-position-button-label:string |
Локализованный текст кнопки для вызова поля поиска мест. |
msg-manual-position-prompt:string |
Локализованный текст с запросом определить начальное местоположение на карте. |
msg-manual-position-placeholder:string |
Локализованный заполняющий текст в поле поиска начального местоположения на карте. |
msg-geocode-failure:string |
Локализованный запрос, который отображается при неудачной попытке использовать API определения местоположения. |
msg-no-results-found:string |
Локализованный текст сообщения о том, что запрошенные места не найдены в указанной области карты. |
События
| Название | Описание |
|---|---|
pinclick |
Пользователь выбирает маркер на карте. |
Методы
| Название | Описание |
|---|---|
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
Установить центр карты в месте с указанной широтой и долготой. |
gwd-page
Страница представляет собой одну карту в группе.
Свойства
| Название | Описание |
|---|---|
expanded:boolean |
Позволяет выбрать, считать ли страницу развернутой (только для объявлений). |
centered:boolean |
Позволяет выбрать, выравнивать ли содержимое текущей страницы по центру. |
alt-orientation-page:string |
Идентификатор страницы, на которой оптимально представлено это содержимое с альтернативной ориентацией. |
События
| Название | Описание |
|---|---|
attached |
Отправляется сразу после прикрепления страницы к DOM. |
detached |
Отправляется сразу после удаления страницы из DOM. |
pageactivated |
Отправляется, когда страница готова к показу. |
pagedeactivated |
Отправляется, когда страница больше не отображается. |
pageload |
Отправляется после успешной загрузки содержимого страницы. |
pagepresenting |
Отправляется непосредственно перед началом анимации. |
shake |
Отправляется при встряхивании устройства. |
tilt |
Отправляется при наклоне устройства. |
rotatetoportrait |
Отправляется при смене ориентации устройства на вертикальную. |
rotatetolandscape |
Отправляется при смене ориентации устройства на горизонтальную. |
gwd-pagedeck
Группа страниц – это контейнер с несколькими страницами, которые можно поочередно показывать в любом порядке и с любыми из поддерживаемых переходов. Одновременно в контейнере может отображаться только одна страница.
Свойства
| Название | Описание |
|---|---|
default-page:string |
Идентификатор страницы по умолчанию. |
События
| Название | Описание |
|---|---|
pagetransitionstart |
Отправляется перед переходом между страницами. |
pagetransitionend |
Отправляется, когда переход между страницами завершен. |
Методы
| Название | Описание |
|---|---|
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Перейти к следующей странице в группе. |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Перейти к предыдущей странице в группе. |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Перейти к указанной странице в группе. |
getCurrentPage() |
Показать текущую страницу или ноль, если страница не отображается. |
getDefaultPage() |
Показать страницу по умолчанию, если она указана, или первую страницу. |
getPage(pageId:string) |
Показать страницу с указанным идентификатором. |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
Вернуть элемент страницы с заданным значением атрибута или –1, если страница не найдена. |
getOrientationSpecificPage(orientation:string, pageId:string) |
Вернуть страницу с заданной ориентацией. |
getElementById(id:string) |
Найти элемент с указанным идентификатором на всех страницах в этой группе. Поскольку gwd-pagedeck только сохраняет активную страницу в DOM, стандартный document.getElementById(id) не возвращает элементы неактивных страниц. Этот метод часто используется для обращения к элементам неактивных страниц, особенно в динамических объявлениях. В таких случаях его можно использовать, чтобы разыменовать элемент по его идентификатору. |
gwd-parallax
Компонент "Параллакс".
Свойства
| Название | Описание |
|---|---|
settings:string |
Запускает диалоговое окно настроек компонента. |
yscroll:decimal |
Коэффициент прокрутки для анимации с параллаксом, используется только в рабочей области. |
События
| Название | Описание |
|---|---|
ready |
Отправляется, когда загружены все объекты компонента "Параллакс". |
gwd-particleeffects
Компонент для сочетания нескольких эффектов частиц и изображений.
Свойства
| Название | Описание |
|---|---|
autoplay:boolean |
Позволяет выбрать, воспроизводить ли анимацию при загрузке компонента автоматически. |
time-limit:number |
Ограничение по продолжительности анимации. Значение -1 указывает на то, что ограничение по времени отсутствует. |
settings:string |
Запускает диалоговое окно настроек компонента. |
События
| Название | Описание |
|---|---|
timelimitreached |
Отправляется, когда воспроизведение анимации достигло заданного времени. |
Методы
| Название | Описание |
|---|---|
play() |
Воспроизвести анимацию. |
pause() |
Приостановить анимацию. |
stop() |
Остановить анимацию. |
gwd-particles
Компонент "Частицы".
Свойства
| Название | Описание |
|---|---|
acceleration-x:number |
Ускорение относительно оси X в пкс/кадр/кадр. |
acceleration-y:number |
Ускорение относительно оси Y в пкс/кадр/кадр. |
angle-max:number |
Максимальный угол для направления скорости частиц. |
angle-min:number |
Минимальный угол для направления скорости частиц. |
autoplay:boolean |
Позволяет выбрать, воспроизводить ли анимацию автоматически при загрузке родительского компонента "Эффекты частиц". |
color1:color |
Первый цвет. |
color2:color |
Второй цвет. |
color-rate:number |
Скорость изменения цвета от color 1 до color 2 на кадр в диапазоне [0, 1]. |
emit-interval:number |
Количество кадров, показываемых до следующей частицы. |
emit-x-max:string |
Максимальная координата X диапазона выпуска частиц. |
emit-x-min:string |
Минимальная координата X диапазона выпуска частиц. |
emit-y-max:string |
Максимальная координата Y диапазона выпуска частиц. |
emit-y-min:string |
Минимальная координата Y диапазона выпуска частиц. |
loop:boolean |
Позволяет выбрать, повторять ли анимацию. |
number:number |
Количество частиц. |
opacity-min:number |
Минимальная прозрачность частиц. |
opacity-max:number |
Максимальная прозрачность частиц. |
opacity-rate:number |
Скорость изменения прозрачности на кадр, которая добавляется к текущей прозрачности частицы. |
random-colors:boolean |
Позволяет выбрать, генерируются ли частицы со случайным цветом от color 1 до color 2. Если задано значение false, все частицы инициализируются с цветом color 1. |
shape:string |
Форма спрайта. |
size-max:number |
Максимальный размер частиц в пикселях. |
size-min:number |
Минимальный размер частиц в пикселях. |
size-rate:number |
Скорость изменения размера на кадр, которая добавляется к текущему размеру частицы. |
skip-forward:number |
Перейти к моменту с определенным процентом выпущенных частиц. |
speed-max:number |
Максимальная скорость частиц в пикселях на кадр. |
speed-min:number |
Минимальная скорость частиц в пикселях на кадр. |
sprite-image-src:file |
Источник изображений для спрайта. |
turbulence-frequency:number |
Частота турбулентности. Высокие значения чаще вызывают отклонения в движении частиц. Значение должно быть положительным. |
turbulence-rate:number |
Скорость изменения силы. |
turbulence-strength:number |
Сила турбулентности частиц. Значение должно быть положительным. |
turbulence-trail:number |
Количество предыдущих и текущих состояний частицы, которые нужно показывать. |
Методы
| Название | Описание |
|---|---|
play() |
Воспроизвести анимацию. |
pause() |
Приостановить анимацию. |
stop() |
Остановить анимацию. |
gwd-spritesheet
Этот компонент отображает ключевой кадр или анимацию из таблицы спрайтов.
Свойства
| Название | Описание |
|---|---|
imagesource:file |
URL для изображения таблицы спрайтов. |
offsetx:number |
Смещение в пикселях от левой стороны таблицы спрайтов:
|
offsety:number |
Смещение в пикселях от верхней части таблицы спрайтов:
|
clipwidth:number |
Ширина в пикселях:
|
clipheight:number |
Высота в пикселях:
|
alignment:string |
Выравнивание изображения в контейнере. |
scaling:string |
Определяет адаптацию размеров изображений в компоненте. |
totalframecount:number |
Количество кадров анимации. |
duration:number |
Продолжительность показа каждого кадра в миллисекундах. |
loopcount:number |
Количество повторов анимации. Установите 0, чтобы зациклить анимацию. |
autoplay:boolean |
Позволяет выбрать, воспроизводить ли анимацию автоматически. |
endonstartframe:boolean |
Позволяет выбрать, заканчивать ли анимацию на начальном кадре. |
reverseplay:boolean |
Позволяет выбрать, воспроизводить ли анимацию в обратном порядке. |
События
| Название | Описание |
|---|---|
animationend |
Отправляется, когда анимация заканчивается. |
animationpause |
Отправляется, когда анимация приостанавливается. |
animationplay |
Отправляется, когда начинается воспроизведение анимации. |
animationrestart |
Отправляется, когда анимация воспроизводится после паузы. |
Методы
| Название | Описание |
|---|---|
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
Создать новую анимацию. |
play() |
Воспроизвести анимацию. |
pause() |
Приостановить анимацию. |
togglePlay() |
Переключиться между воспроизведением и приостановкой анимации. |
restart() |
Перезапустить анимацию. |
previousFrame() |
Показать предыдущий кадр. |
nextFrame() |
Показать следующий кадр. |
goToFrame(id:number) |
Показать кадр с определенным номером. |
gwd-starratings
Компонент для визуализации ряда звездочек, представляющих рейтинг.
Свойства
| Название | Описание |
|---|---|
ratingvalue:decimal |
Значение оценки. |
iconsize:number |
Размер значка. |
isemptyshown:boolean |
Позволяет определить, показываются ли пустые звездочки. |
isemptycolored:boolean |
Позволяет определить, закрашены ли пустые звездочки. |
colorprimary:color |
Основной цвет заливки. |
colorsecondary:color |
Дополнительный цвет градиента. |
gradienttype:string |
Тип градиента. |
ratingmax:number |
Максимальный рейтинг. |
ratingmin:decimal |
Минимальный рейтинг. |
События
| Название | Описание |
|---|---|
complete |
Отправляется, когда созданы значки рейтинга. |
validationerror |
Отправляется, когда значение рейтинга меньше минимального. |
gwd-streetview
Компонент "Google Просмотр улиц".
Свойства
| Название | Описание |
|---|---|
key:string |
Информацию о том, как получить уникальный ключ для своего приложения, можно найти на странице https://developers.google.com/maps/documentation/javascript/get-api-key. |
latitude:decimal |
Значение широты местоположения. |
longitude:decimal |
Значение долготы местоположения. |
interaction:boolean |
Возможность панорамировать или повернуть вид. |
heading:decimal |
Указывает направление камеры по компасу. Допустимые значения от 0 до 360 (оба эти значения соответствуют направлению на север, 90 – на восток, 180 – на юг). Если направление не указано, будет рассчитано значение, направляющее камеру на указанное местоположение из точки, в которой была сделана ближайшая фотография. |
pitch:decimal |
Определяет угол наклона камеры вверх и вниз по отношению к автомобилю. Обычно, но не всегда, камера расположена горизонтально. Положительные значения соответствуют поднятию камеры (90º – вверх под прямым углом), отрицательные – ее опусканию (–90º – вниз под прямым углом). |
zoom:number |
Масштабирование изображения по отношению к автомобилю. |
gwd-swipegallery
Объект галереи, в котором кадры отображаются в виде ленты, перелистываемой одним движением.
Свойства
| Название | Описание |
|---|---|
images:string |
Разделенный запятыми список URL кадров галереи. |
groups:string |
Разделенный запятыми список идентификаторов групп. |
transition-duration:number |
Скорость анимации в галерее в миллисекундах. |
start-frame:number |
Начальный кадр. |
num-frames-to-display:number |
Количество одновременно отображаемых кадров. |
frame-snap-interval:number |
Количество кадров, перелистываемых за один раз. |
autoplay:boolean |
Позволяет выбрать, показать ли все кадры в галерее один раз автоматически. |
has-navigation:boolean |
Позволяет выбрать, включать ли элементы навигации по галерее. |
navigation-thumbnails:boolean |
Позволяет выбрать, использовать ли для навигации эскизы вместо точек. |
navigation-highlight:color |
CSS-код цвета, которым выделяется активный кадр на панели навигации. |
scaling:string |
Принцип, по которому изображение будет масштабироваться в кадре. |
swipe-axis:string |
Ось, для которой обнаружено перелистывание. |
offset:number |
Расстояние между соседними кадрами. |
frame-width:number |
Ширина одного кадра. Переопределяет num-frames-to-display. |
frame-height:number |
Высота одного кадра. |
autoplay-duration:number |
Общая продолжительность автовоспроизведения кадров. |
autoplay-step-interval:number |
Интервал между кадрами во время автовоспроизведения. |
exit-urls:string |
Разделенный запятыми список URL перехода, соответствующих каждому кадру галереи. |
disable-gesture:boolean |
Позволяет отключить или включить компонент "Жест" для сенсорной навигации по галерее. |
pause-front-media:boolean |
Позволяет выбрать, приостанавливать ли воспроизведение мультимедийного элемента (например, видео или аудио) в предыдущем кадре при смене кадра. |
resume-next-media:boolean |
Позволяет выбрать, возобновлять ли воспроизведение мультимедийного элемента (например, видео или аудио) в новом кадре при смене кадра. |
События
| Название | Описание |
|---|---|
firstinteraction |
Отправляется, когда пользователь впервые взаимодействует с галереей. |
allframesviewed |
Отправляется, когда все кадры галереи показаны хотя бы один раз. |
allframesloaded |
Отправляется, когда все кадры галереи загружены. |
autoplayended |
Отправляется после завершения автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false. |
frameshown |
Отправляется при показе нового кадра после завершения необходимой анимации. |
frameactivated |
Отправляется в начале активации нового кадра, даже если он ещё не виден. |
frameautoplayed |
Отправляется после активации кадра для автовоспроизведения. Может запускаться чаще, чем frameshown, поскольку активируется отдельно для каждой группы одновременно отображаемых кадров. |
frametap |
Отправляется, когда пользователь касается кадра. |
reachleftend |
Отправляется, когда достигнут левый край галереи. |
reachrightend |
Отправляется, когда достигнут правый край галереи. |
framemouseover |
Отправляется, когда пользователь наводит указатель на кадр. |
framemouseout |
Отправляется, когда пользователь выводит указатель из кадра. |
trackstart |
Отправляется, когда начинается перетаскивание касанием или мышью. |
track |
Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием. |
trackend |
Отправляется, когда завершается перетаскивание касанием или мышью. |
Методы
| Название | Описание |
|---|---|
goToFrame(frame:number, opt_animate:string) |
Перейти к указанному кадру. |
rotateOnce(opt_duration:number, opt_direction:string) |
Показать все кадры в галерее по одному разу. |
stopRotation() |
Прекратить автоматическое перелистывание. |
goForwards() |
Перейти на один кадр вперед. |
goBackwards() |
Перейти на один кадр назад. |
gwd-swirl
Компонент "Эффект вращения".
Свойства
| Название | Описание |
|---|---|
yscroll:decimal |
Коэффициент прокрутки для анимации с компонентом "Эффект вращения" используется только в рабочей области. |
settings:string |
Запускает диалоговое окно настроек компонента. |
События
| Название | Описание |
|---|---|
ready |
Отправляется после загрузки всех дочерних объектов. |
gwd-taparea
С помощью этого компонента можно вызвать действия нажатием.
Свойства
| Название | Описание |
|---|---|
exit-override-url:string |
URL для перехода после касания интерактивной области. |
События
| Название | Описание |
|---|---|
action |
Отправляется, когда пользователь касается кнопки на мобильном устройстве или нажимает ее на компьютере. |
gwd-taptocall
Этот компонент позволяет по нажатию позвонить или отправить SMS на указанный номер телефона.
Свойства
| Название | Описание |
|---|---|
number:string |
Номер телефона для вызова или отправки SMS. |
action:string |
Позволяет выбрать действие: вызов или отправка SMS. |
События
| Название | Описание |
|---|---|
action |
Отправляется, когда пользователь касается кнопки на мобильном устройстве или нажимает ее на компьютере. |
taptocall |
Отправляется, когда пользователь запрашивает вызов или SMS. |
Методы
| Название | Описание |
|---|---|
dial() |
Позвонить или отправить SMS на заданный номер. |
gwd-transitiongallery
Компонент "Галерея переходов".
Свойства
| Название | Описание |
|---|---|
settings:string |
Запускает диалоговое окно настроек компонента. |
images:string |
Разделенный запятыми список URL кадров галереи. |
scaling:string |
Принцип, по которому изображение будет масштабироваться во фрейме. |
exit-urls:string |
Разделенный запятыми список URL перехода, соответствующих каждому кадру галереи. |
События
| Название | Описание |
|---|---|
autoplayended |
Отправляется после завершения автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false. |
frameactivated |
Отправляется в начале активации нового кадра, даже если он ещё не виден. |
frameshown |
Отправляется при показе нового кадра. |
frametap |
Отправляется, когда пользователь касается кадра. |
rotateonceended |
Отправляется после завершения поворота по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false. |
reachleftend |
Отправляется, когда достигнут левый край галереи. |
reachrightend |
Отправляется, когда достигнут правый край галереи. |
Методы
| Название | Описание |
|---|---|
goToFrame(frame:number, with_animation:boolean) |
Перейти к указанному кадру. |
rotateOnce(startFromCurrentFrame:boolean) |
Если для метода startFromCurrentFrame не задано значения или задано значение false, показать каждый кадр в галерее с начального, в ином случае – с текущего. Поворот завершается до отображения первого кадра. |
startAutoplay(startFromCurrentFrame:boolean) |
Если для метода startFromCurrentFrame не задано значения или задано значение false, запустить автовоспроизведение галереи с начального кадра, в ином случае – с текущего. Автовоспроизведение завершается при достижении заданного количества повторов. |
stop() |
Отменить воспроизводимую анимацию. |
goForwards() |
Перейти на один кадр вперед. |
goBackwards() |
Перейти на один кадр назад. |
gwd-blinds
Эффект "Жалюзи", при котором новое изображение появляется будто из-за жалюзи.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
blinds:number |
Количество жалюзи. |
transparentbackground:boolean |
Позволяет выбрать, отображается ли прозрачный фон до перехода к новому изображению. Если задано значение false, жалюзи накладываются на старое изображение. |
gwd-door-wipe
Вариант эффекта "Стирание". Новое изображение появляется от центра к краям старого изображения (как при открытии двустворчатых дверей) или от краев к центру (как при закрытии двустворчатых дверей).
Свойства
| Название | Описание |
|---|---|
orientation:dropdown |
Ориентация анимации. |
direction:dropdown |
Направление анимации эффекта "Дверь". |
gwd-fade
Переход "Затемнение".
gwd-iris-wipe
Вариант эффекта "Стирание", при котором новое изображение появляется из раскрывающейся диафрагмы.
Свойства
| Название | Описание |
|---|---|
originpercentx:number |
Раскрытие диафрагмы по оси X относительно ширины кадра. |
originpercenty:number |
Раскрытие диафрагмы по оси Y относительно высоты кадра. |
gwd-push
Эффект смещения, при котором новое изображение сдвигает старое за кадр.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта смещения. |
gwd-radial-wipe
Вариант эффекта "Стирание", при котором новое изображение появляется, раскрываясь по радиусу вокруг заданной точки наподобие стрелки часов.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
originpercentx:number |
Точка на оси X относительно ширины кадра, с которой начинает сдвигаться радиус, открывая новое изображение. |
originpercenty:number |
Точка на оси Y относительно высоты кадра, с которой начинает сдвигаться радиус, открывая новое изображение. |
gwd-rotate
Эффект поворота, при котором старое изображение начинает вращаться и увеличиваться, а затем уменьшается и к концу вращения переходит в новое изображение.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
gwd-slice
Эффект "Секторы", при котором новое изображение появляется в виде секторов или столбцов, возникающих в кадре друг за другом.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
slices:number |
Количество секторов или столбцов. |
transparentbackground:boolean |
Позволяет выбрать, отображается ли прозрачный фон до перехода к новому изображению. Если задано значение false, секторы накладываются на старое изображение. |
gwd-split-push
Вариант эффекта "Смещение", при котором старое изображение разделяется на две части по вертикали или горизонтали. Разделенные части нового изображения сдвигают части старого за кадр в противоположных направлениях.
Свойства
| Название | Описание |
|---|---|
orientation:dropdown |
Ориентация анимации. |
gwd-stripe-wipe
Вариант эффекта "Стирание", при котором полосы чередующихся цветов появляются на экране и закрывают старое изображение, а затем сужаются и переходят в новое.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
stripes:number |
Количество полос каждого цвета. |
color1:color |
Шестнадцатеричный цветовой код для первого из чередующихся цветов полос. |
color2:color |
Шестнадцатеричный цветовой код для второго из чередующихся цветов полос. |
gwd-venetian-blinds
Вариант эффекта "Жалюзи", при котором новое изображение появляется будто из-за венецианских жалюзи.
Свойства
| Название | Описание |
|---|---|
orientation:dropdown |
Ориентация анимации. |
blinds:number |
Количество жалюзи. |
staggered:boolean |
Позволяет выбрать, переходят ли жалюзи постепенно друг за другом. Если задано значение false, все жалюзи переходят одновременно. |
gwd-wipe
Компонент перехода "Стирание". Стандартный эффект стирания, при котором новое изображение постепенно заменяет старое вдоль линии, движущейся от одного края к другому.
Свойства
| Название | Описание |
|---|---|
direction:dropdown |
Направление эффекта. |
angle:number |
Угол наклона линии, заменяющей старое изображение новым. |
gwd-zigzag
Эффект "Зигзаг", при котором новое изображение появляется в чередующихся направлениях, повторяя движения змейки. При горизонтальном направлении перехода части нового изображения появляются в виде строк то слева направо, то справа налево. При вертикальном направлении перехода части нового изображения появляются в виде столбцов то сверху вниз, то снизу вверх.
Свойства
| Название | Описание |
|---|---|
orientation:dropdown |
Ориентация анимации. |
rows:number |
Количество строк в эффекте "Зигзаг". |
columns:number |
Количество столбцов в эффекте "Зигзаг". |
gwd-video
Компонент с интерфейсом HTMLVideoElement.
Свойства
| Название | Описание |
|---|---|
autoplay:boolean |
Позволяет выбрать, воспроизводить ли видео автоматически при загрузке страницы. |
loop:boolean |
Позволяет выбрать, повторять ли воспроизведение видео. |
muted:boolean |
Позволяет выбрать, начинать ли воспроизведение видео без звука. |
controls:boolean |
Позволяет выбрать, активировать ли стандартные элементы управления встроенного проигрывателя. |
sources:file |
Разделенный запятыми список URL видео в разных форматах. |
poster:string |
URL кадра, который отображается до запуска или переключения между кадрами видео. |
События
| Название | Описание |
|---|---|
play |
Отправляется, когда пользователь возобновляет воспроизведение медиафайла после паузы. |
pause |
Отправляется, когда пользователь приостанавливает воспроизведение. |
playing |
Отправляется после начала воспроизведения медиафайла (как после паузы, так и после окончания и повторного воспроизведения). |
ended |
Отправляется после завершения воспроизведения. |
volumechange |
Отправляется после изменения громкости звука (если изменить настройки громкости либо атрибут свойства muted). |
seeked |
Отправляется после завершения поиска. |
waiting |
Отправляется, когда запрошенная операция (например, воспроизведение) задерживается до завершения другой операции (например, поиска). |
Методы
| Название | Описание |
|---|---|
mute() |
Отключить или включить звук в видео. |
pause() |
Приостановить воспроизведение видео. |
play() |
Воспроизвести видео. |
replay() |
Воспроизвести видео ещё раз. |
seek(time:number) |
Перейти к указанному времени в видео. |
setVolume(volume:number) |
Настроить громкость видео. |
setSources(sources:string) |
Указать источники видео. |
gwd-youtube
Этот компонент добавляет в интерфейс HTMLElement возможность упаковывать вызовы API YouTube.
Свойства
| Название | Описание |
|---|---|
video-url:string |
URL видео YouTube. |
autoplay:string |
Автовоспроизведение видео YouTube после загрузки в поддерживаемых средах. |
preview-duration:number |
Длительность предварительного просмотра. Используется, только если для атрибута autoplay задано значение preview. |
controls:string |
Показывает элементы управления просмотром (none, autohide). |
color:string |
Цветовая тема индикатора проигрывателя (красная или белая). |
muted:boolean |
Позволяет выбрать, начинать ли воспроизведение видео без звука. |
loop:boolean |
Позволяет выбрать, повторять ли воспроизведение видео. |
pause-on-end:boolean |
Позволяет приостановить воспроизведение видео за одну секунду до его окончания. |
start-position:number |
Воспроизведение видео с заданного момента времени (в секундах). |
allowfullscreen:boolean |
Позволяет выбрать, разрешать ли полноэкранный режим. |
extra-player-args:string |
Дополнительные параметры проигрывателя YouTube описаны на странице https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters. |
События
| Название | Описание |
|---|---|
buffering |
Буферизация проигрывателя YouTube. |
ended |
Видео YouTube закончилось. |
paused |
Видео YouTube приостановлено. |
playing |
Начато воспроизведение видео YouTube. |
replayed |
Видео YouTube воспроизведено повторно. |
viewed0percent |
Отправляется, когда просмотрено 0 % видео. |
viewed25percent |
Отправляется, когда просмотрено 25 % видео. |
viewed50percent |
Отправляется, когда просмотрено 50 % видео. |
viewed75percent |
Отправляется, когда просмотрено 75 % видео. |
viewed100percent |
Отправляется, когда просмотрено 100 % видео. |
previewed0percent |
Отправляется, когда завершено 0 % предварительного просмотра. |
previewed25percent |
Отправляется, когда завершено 25 % предварительного просмотра. |
previewed50percent |
Отправляется, когда завершено 50 % предварительного просмотра. |
previewed75percent |
Отправляется, когда завершено 75 % предварительного просмотра. |
previewed100percent |
Отправляется, когда завершено 100 % предварительного просмотра. |
Методы
| Название | Описание |
|---|---|
toggleMute() |
Отключить или включить звук в видео. |
pause() |
Приостановить воспроизведение видео. |
play() |
Воспроизвести видео. |
replay() |
Воспроизвести видео ещё раз. |
seek(time:number) |
Перейти к указанному времени в видео. |
setYouTubeId(id:string, cueOnly:boolean) |
Изменить источник видео YouTube на указанный идентификатор. |