Интерактивная анимация HTML5. Методические указания

© Михаил Ботов, 2017

ISBN 978-5-4485-6305-8

Создано в интеллектуальной издательской системе Ridero

1 Анимация с помощью функции setinterval

Простую анимацию можно организовать при помощи функции setInterval (); Она циклически вызывает переданный ей метод через заданные интервалы времени до тех пор, пока не будет остановлена функцией clearInterval ();

Пример – смещение блока разметки вправо:

Базовые события

События мыши

События загрузки страницы

События браузера

Всплывание события и его остановка

Нужно сказать, что при наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности. Это называется всплыванием события.

Всплытие идёт вверх по иерархии DOM. Обычно событие будет всплывать наверх и наверх, до элемента , а затем до document, а иногда даже до window, вызывая все обработчики на своем пути. Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для остановки всплытия нужно вызвать метод event.stopPropagation ().

2.2 Функция animate

Jquey функция animate () выполняет определенную анимацию на заданном наборе элементов. Анимация происходит за счет плавного изменения их CSS-свойств. Функция имеет два варианта использования:

1).animate (properties, [duration], [easing], [callback])

где

properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)

duration – продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ’fast’ или ’slow’ (200 и 600 миллисекунд).

easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)

callback – функция, которая будет вызвана после завершения анимации.

2).animate (properties, options)

где

properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)

options – дополнительные опции. Должны быть представлены объектом, в формате опция: значение.

Конец ознакомительного фрагмента.

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.