—»     —»   Знакомство с HTML5-API Fullscreen
  Раздел: Образование и Изучение   Нет комментариев  

Знакомство с HTML5-API Fullscreen

В принципе, у нас всегда была возможность раскрывать веб-страницу на весь экран. Чтобы сделать это, можно просто нажать F11 в Windows, или Shift + Command + F в Mac. Тем не менее, бывают случаи, когда мы как веб-разработчики желаем добавить на страницу сайта триггер, который позволяет автоматически производить эту функцию, и не вынуждать пользователей пользоваться дополнительными клавишами.

Знакомство с HTML5-API Fullscreen

Вдобавок ко множеству полезных новых элементов, HTML5 также представляет нам набор новых API, включая и тот, что мы сегодня собираемся обсудить - Fullscreen API. Этот API позволяет нам вывести весь веб-сайт или отдельный элемент со страницы в полноэкранный режим (и наоборот), при помощи родного функционала браузера.

* Посмотреть демо

Что касается реализации, данный API будет очень удобен для демонстрации видео, изображений, онлайн-игр, а также презентаций, организованных на HTML/CSS.

Итак, давайте посмотрим, как это работает.

Браузерная поддержка

На момент написания данного материала, этот API работал только в Google Chrome, Safari и Firefox. Подобно CSS3, в синтаксисе используются префиксы, так как пока что API находится в экспериментальной стадии.

Метод для вывода веб-страницы или определенного элемента на весь экран:

Webkit : webkitRequestFullScreen
Firefox : mozRequestFullScreen

Метод для выхода из полноэкранного режима:

Webkit : webkitCancelFullscreen
Firefox : mozCancelFullscreen

Метод для проверки, выведен ли элемент на весь экран:

Webkit : mozFullScreenElement
Firefox : webkitFullScreenElement

Также стоит отметить, что Fullscreen API – это то, что со временем будет только совершенствоваться.

Примеры применения

Один из лучших способов чему-то научиться – это попробовать. Сегодня мы хотим поработать над простеньким проектом. Суть заключается в том, что у нас будет изображение и кнопка, которая будет выводить изображение на весь экран и возвращать вид обратно к обычному режиму.

HMTL-код

Давайте начнем с HTML-разметки. У нас есть div-элемент, который оборачивает изображение и span-элемент для кнопки.

<div id="fullscreen" class="html5-fullscreen-api">
<img src="img/arokanddedes.jpg">
<span class="fs-button"></span>
</div>

CSS-код

Затем мы помещаем изображение в центр окна, а также добавляем несколько декоративных стилей, чтобы сделать его более привлекательным.

.demo-wrapper {
width: 38%;
margin: 0 auto;
}
.html5-fullscreen-api {
position: relative;
}
.html5-fullscreen-api img {
max-width: 100%;
border: 10px solid #fff;
box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
z-index: 100;
display: inline-block;
width: 32px;
height: 32px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}


Мы решили отобразить иконку в span-элементе при помощи псевдо-элемента :after, чтобы позже иметь возможность без усилий изменить иконки посредством CSS при помощи атрибута content.

.html5-fullscreen-api .fs-button:after {
display: inline-block;
width: 100%;
height: 100%;
font-size: 32px;
font-family: 'ModernPictogramsNormal';
color: rgba(255,255,255,.5);
cursor: pointer;
content: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
color: rgb(255,255,255);
}

Знакомство с HTML5-API Fullscreen

javascript-код

Мы воспользуемся jQuery, чтобы наш код был более опрятным.

Как уже было отмечено, мы выводим изображение на весь экран при помощи клика. Мы оборачиваем функцию в jQuery-функцию .on.

$('.fs-button').on('click', function(){ 

}

Сначала мы проверяем, не выведен ли элемент в полноэкранный режим, и если будет получено условие, мы выполняем webkitCancelFullScreen, чтобы вернуть его в обычный режим. В противном случае, мы выводим его в полноэкранный режим при помощи метода webkitRequestFullScreen следующим образом:

$('.fs-button').on('click', function(){
var elem = document.getElementById('fullscreen');
if(document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
}
else {
elem.webkitRequestFullScreen();
};
});

Нажмите по иконке fullscreen, и наше изображение будет выведено на весь экран, как показано на скриншоте ниже:

Знакомство с HTML5-API Fullscreen

CSS Fullscreen

Webkit (а также Firefox) также предоставляет набор новых псевдо-классов, которые позволяют нам добавлять правила стилей, когда элемент находится в полноэкранном режиме. Предполжим, что нам нужно изменить фон. Тогда мы можем расписать правила стилизации следующим образом:

#fullscreen:-webkit-full-screen {
background-image: url('../img/ios-linen.jpg');
width: 100%;
}

Теперь вы можете видеть представленную текстуру в полноэкранном режиме.

Знакомство с HTML5-API Fullscreen

На этом все. Вы можете перейти на страницу демо, чтобы увидеть API в действии. Так как мы не определили функцию с синтаксисом для Firefox, данное демо будет работать только в семействе браузеров Webkit, а также в Google Chrome и Safari.

* Посмотреть демо

Ссылки

* Черновик Fullscreen API - W3C
* Применеие полноэкранного режима - MDN
* HTML5 Fullscreen API - Sitepoint
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, API
Опубликовал Design FactoRy   Прочитано (раз): 10848   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031