Создание анимации смены темы с использованием JavaScript может быть интересным и творческим процессом. Ваша задача заключается в том, чтобы изменять стили элементов страницы с плавной анимацией, которая зависит от глубины элементов в иерархии. Для этого вы можете использовать CSS-переходы и JavaScript для управления анимацией.
Вот основные шаги, чтобы создать аналогичную анимацию смены темы:
1. **Структура HTML**: Убедитесь, что у вас есть элементы, которым вы хотите изменить стили.
2. **CSS для плавного перехода**: Используйте CSS для задания плавных переходов на элементы.
3. **JavaScript для смены темы**: Реализуйте логику для применения новых стилей и анимации.
### Пример
Вот небольшой пример, который демонстрирует концепцию:
#### HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Смена темы</title>
</head>
<body>
<div class="theme-container">
<h1 class="header">Смена темы</h1>
<p class="content">Нажмите кнопку, чтобы изменить тему.</p>
<button id="themeToggle">Сменить тему</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
#### CSS (styles.css)
```css
body {
transition: background-color 0.5s ease;
background-color: white;
color: black;
}
body.dark {
background-color: black;
color: white;
}
.theme-container > * {
transition: opacity 0.5s ease;
}
.hide {
opacity: 0;
}
```
#### JavaScript (script.js)
```javascript
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
const elements = document.querySelectorAll('.theme-container > *');
themeToggle.addEventListener('click', () => {
// Скрываем элементы перед сменой темы
elements.forEach((el, index) => {
setTimeout(() => {
el.classList.toggle('hide');
}, index * 100); // задержка по порядку 0.1 секунды
});
// Сменяем тему после того, как элементы скрыты
setTimeout(() => {
body.classList.toggle('dark');
// Показываем элементы после смены темы
elements.forEach((el, index) => {
setTimeout(() => {
el.classList.toggle('hide');
}, index * 100); // задержка по порядку 0.1 секунды
});
}, elements.length * 100); // Ждем, пока все элементы исчезнут
});
```
### Объяснение
1. **HTML**: Это базовая структура с заголовком, параграфом и кнопкой для смены темы.
2. **CSS**:
- Добавлен эффект перехода для фона и цвета текста.
- Класс `.hide` используется для плавного исчезновения элементов.
3. **JavaScript**:
- При нажатии на кнопку каждый элемент скрывается с задержкой, чтобы создать эффект анимации по глубине.
- После изменения темы мы показываем элементы с той же задержкой.
### Полезные ссылки
- [MDN Web Docs: CSS Transitions](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
- [MDN Web Docs: JavaScript setTimeout()](https://developer.mozilla.org/ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
- [CSS Tricks: A Complete Guide to CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Этот пример можно расширять и дорабатывать в зависимости от ваших потребностей. Удачи с вашим проектом!