Introduction
15:35
Video material
Types and tasks of animation
Introduction
Types and tasks of animation
15:35
Diving into HTML Page Structure
Step-by-step animation from Tilda
15:35
CSS: Basic Knowledge
Page structure
15:35
Styling elements
15:35
CSS: Element Layout
Pseudo-elements and pseudo-classes
15:35
Elements position
15:35
List of lessons
Basis
Basis
Basis
Display type
15:35
Additional properties
15:35
Описание
Моушен-дизайн:
Это дисциплина, которая использует анимацию и визуальные эффекты для оживления статичных элементов.
Она помогает создать более естественное поведение обьектов, схожее с реальной жизнью.
Она помогает создать более естественное поведение обьектов, схожее с реальной жизнью.
Ключевые задачи анимации:
Информационная
Информационная задача в анимации заключается в передаче определенной информации пользователю.
С помощью анимации мы помогаем пользователю в навигации по сайту, акцентируем его внимательно на важных моментах, улучшаем восприятие от контента.
С помощью анимации мы помогаем пользователю в навигации по сайту, акцентируем его внимательно на важных моментах, улучшаем восприятие от контента.
- Прелоадеры;
- Подсказки на скролл страницы;
- Включение аудио;
- Перелистывание слайдера;
- Открытие-закрытие панелей и многие другие.
Эстетическая
Эстетическая задача анимаций в веб-дизайне связана с улучшением визуального восприятия сайта и созданием привлекательного пользовательского интерфейса. Анимации могут использоваться для добавления динамики и красоты в дизайн, делая его более привлекательным и запоминающимся для пользователей.
Material from the video
Links from the video
Join flow party - joinflowparty.com
Locomotive - locomotive.ca
Kodemedia - kodemedia.com
Motion design
It is a discipline that uses animation and visual effects to display static elements.
It helps create more natural behavior of objects, closer to life.
It helps create more natural behavior of objects, closer to life.
Information
The information task in animation is to convey certain information to the user.
With the help of animation, we help the user navigate the site, focus on important points, and improve the perception of the content.
With the help of animation, we help the user navigate the site, focus on important points, and improve the perception of the content.
- Preloaders;
- Hints on page scrolling;
- Turn on audio;
- Flipping the slider;
- Opening and closing panels and many others.
Aesthetic
The aesthetic goal of animations in web design is related to improving the visual perception of the site and creating an attractive user interface. Animations can be used to add movement and beauty to a design, making it more attractive and memorable to users.
Key animation tasks
Description
Types of interaction animations
Animation behavior
Tasks of animation
<!--Трансформация текста
https://mt-webdesign.ru/text-transformation-->
<style>
.letter-transform {
display: flex;
transition: transform 0.2s linear;
transform-origin: bottom;
cursor: default;
}
</style>
<script>
// Разрешение с которого начнет работать скрипт (600px)
if (window.innerWidth >= 600) {
document.addEventListener('mousemove', function(e) {
const paddingX = 50; // Доп отступы по X
const paddingY = 50; // Доп отступы по Y
const letters = document.querySelectorAll('.letter-transform');
letters.forEach((letter, index) => {
applyTransformation(letter, index, e, paddingX, paddingY);
});
});
}
function applyTransformation(letter, index, e, paddingX, paddingY) {
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
const boundingRect = letter.getBoundingClientRect();
minX = boundingRect.left - paddingX;
minY = boundingRect.top - paddingY;
maxX = boundingRect.right + paddingX;
maxY = boundingRect.bottom + paddingY;
if (e.clientX >= minX && e.clientX <= maxX && e.clientY >= minY && e.clientY <= maxY) {
const centerX = boundingRect.left + boundingRect.width / 2;
const distanceFromCenter = Math.abs(centerX - e.clientX);
const centerY = boundingRect.height / 2;
const computedStyle = window.getComputedStyle(letter);
const zoomValue = parseFloat(computedStyle.zoom) || 1;
let scaleFactorY = 1 + ((boundingRect.width / 2 - distanceFromCenter) / (boundingRect.width / 2) * 0.6) / zoomValue;
scaleFactorY = Math.max(1, Math.min(scaleFactorY, 1.3)); // Scale от 1 до 1.3
const translateY = (scaleFactorY - 1) * boundingRect.height / 26; // Сдвиг вверх
letter.style.transform = `scale(1, ${scaleFactorY}) translateY(${translateY}px)`;
} else {
letter.style.transform = 'scale(1, 1) translateY(0)';
}
}
</script>
Introduction
Types and tasks of animation
15:35
Types and tasks of animation
15:35
Step-by-step animation from Tilda
15:35
Diving into HTML Page Structure
Step-by-step animation from Tilda
15:35
Page structure
15:35
Page structure
15:35
CSS: Basic Knowledge
Styling elements
15:35
Styling elements
15:35
Pseudo-elements and pseudo-classes
15:35
Pseudo-elements and pseudo-classes
15:35
CSS: Element Layout
Elements position
15:35
Elements position
15:35
Display type
15:35
Display type
15:35
Additional properties
15:35
Additional properties
15:35
List of lessons
Basis
Basis
Basis