Introduction
15:35
Video material
Types and tasks of animation
Introduction
Types and tasks of animation
15:35
Types and tasks of animation
15:35
Diving into HTML Page Structure
Step-by-step animation from Tilda
15:35
Step-by-step animation from Tilda
15:35
CSS: Basic Knowledge
Page structure
15:35
Page structure
15:35
Styling elements
15:35
CSS: Element Layout
Styling elements
15:35
Pseudo-elements and pseudo-classes
15:35
Pseudo-elements and pseudo-classes
15:35
Elements position
15:35
List of lessons
Basis
Elements position
15:35
Basis
Basis
Display type
15:35
Display type
15:35
Additional properties
15:35
Additional properties
15:35
Links from the video
Join flow party - joinflowparty.com
Locomotive - locomotive.ca
Kodemedia - kodemedia.com
Material from the video
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
Code from video
Code
<!--Трансформация текста
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