Анимация Факультет Интернета мфпу синергия курс Вебразработка Илья Ершов Анимация

• Название: Анимация Факультет Интернета мфпу синергия курс Вебразработка Илья Ершов Анимация
• Дата: 14.03.2022
• Размер: 0.96 Mb.
• Имя файла: web_razrabotka_11_Animacija.pptx
• Тип: Документы; #395721

Анимация

Факультет Интернета МФПУ СИНЕРГИЯ

Курс «Веб-разработка»

Илья Ершов

Анимация

• CSS свойство transition
• CSS свойство Keyframe Animations
• JQuery
• Parallax
• Green Sock Animation Platform (GSAP)

CSS свойство transition

.example {

transition: [свойство-перехода] [длительность-перехода] [функция-перехода] [отсрочка-перехода];

}

.example {

background-color: red;

}

CSS свойство transition

.example {

background-color: red;

}

CSS свойство transition

• Браузер исполняет анимацию с помощью собственного графического движка
• Простой синтаксис
• Легко тестировать в Инструментах разработчиков

• Более детальный контроль анимации
• Легко смешивать, одно свойство keyframes может анимировать цвет, прозрачность, размер и т.д.
• Дополнительные параметры анимации (бесконечная, альтернативная)

.box {

animation: pulse 1s infinite alternate;

}

@keyframes pulse {

from { opacity: 0.4; }

to { opacity: 1; }

}

.box {

background-color: green;

width: 150px;

height: 150px;

float: left;

margin-right: 10px;

}

alternate (разворот анимации):

infinite (бесконечная анимация):

JavaScript анимация JQuery

• $("#slider").show("slow") - отобразить
• .hide("slow") - скрыть
• .slideDown("fast") - развернуть
• .slideUp("slow") - свернуть
• .fadeIn("normal") - проявить
• .fadeOut("slow") – погасить
• .animate({height: "300px", width: "50%"}) – анимированное изменение CSS свойств, позволяет строить цепочки эффектов

//jquery.com/

JavaScript анимация Parallax

//matthew.wagerfield.com/parallax/

//greensock.com/

//greensock.com/

Илья Ершов

Веб-разработчик, руководитель интернет-проектов

[e-mail]

Skype: ershov.ilya

www.ershov.pw

Спасибо за внимание