Переходы

Для создания настоящей анимации необходимо определять переходы между соседними шагами процесса.

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

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;

-moz-transition: -moz-transform 1s ease-in-out 0.5s;

}

#mainbox:hover{

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

}

Свойство transition принимает до четырех параметров, разделенных пробелами. Первое значение представляет свойство, на базе которого будет создаваться переход. Его необходимо указывать, т.к. одновременно могут меняться несколько свойств. а нам. вероятно, нужно создать шаги только для одного из них. Второй параметр устанавливает время, за которое должен произойти переход из начального положения в конечное. Третьим параметром может выступать любое из пяти ключевых слов: ease, linear, ease-in,ease-out и ease-in-out. Эти ключевые слова определяют, на основе какой кривой Безье будет выполняться процесс перехода. последний параметр свойства transition - это задержка. Он определяет. какова будет пауза перед началом перехода. Для того чтобы переход охватывал все меняющиеся свойства данного объекта, необходимо указать ключевое слово all. Также можно явно объявить все участвующие свойства, просто перечислив их через запятую.

В нашем примере мы создали переход для изменений, определяемых свойством transform. Однако свойство transition поддерживает не все свойства CSS, а список поддерживаемых, вероятно, со временем будет меняться. Поэтому код нужно внимательно тестировать.

Лабораторная работа №6

JavaScript

Цель работы: Практическое знакомство с новыми возможностями JavaScript в спецификации HTML5.

Задание: На примере разрабатываемого веб-сайта продемонстрировать новые подходы к обращению к элементам документа из сценария JavaScript и новый подход к регистрации обработчика событий.

Краткие теоретические сведения:

JavaScipt – интерпретируемый язык, применяемый для множества целей, но которому пока что отводиласьисключительно вспомогательная роль. Одной из новаций, благодаря которой взгляд на JavaScript кардинально изменился, стали новые механизмы браузеров, специально разработанные для ускорения обработки сценариев. Разработчики большинства успешных механизмов приняли общее ключевое решение: превращать сценарии в машинный код. Это позволило достичь скоростей, сравнимых со скоростями настольных приложений.

Для того чтобы пользоваться преимуществами новой многообещающей инфраструктуры, JavaScript улучшили , приняв во внимание переносимость и интеграцию. Кроме того, по умолчанию в каждый браузер были встроены полные прикладные интерфейсы программирования (API), дополняющие базовую функциональность языка. Эти новые API (такие как Web Storage – Веб-хранилище, Canvas – Холст и другие) представляют собой интерфейсы для встроенных в браузер библиотек. Замысел заключается в том, чтобы обеспечить повсеместную доступность мощных возможностей через простые стандартизованные техники программирования, расширяя таким образом масштаб применения языка и способствуя созданию необходимого и полезного программного обеспечения для Сети.