Web Animations API (WAAPI)

Обычно анимации на сайте делают двумя путями: либо пишут @keyframes в CSS (отлично для простых вещей), либо подключают тяжелые JS-библиотеки вроде GSAP / Anime.js (когда нужен сложный контроль, паузы, реверс или динамические значения).
Но мало кто помнит про Web Animations API (WAAPI) – нативный браузерный движок, который объединяет силу JS-управления и производительность CSS (анимации выполняются на уровне композитного слоя GPU).
простой пример: анимируем появление элемента по клику

const box = document.querySelector('.box');

document.querySelector('.btn').addEventListener('click', () => {
  // Вызываем нативный метод .animate()
  box.animate(
    // 1. Описываем ключевые кадры (как в @keyframes)
    [
      { transform: 'scale(0.5)', opacity: 0 },
      { transform: 'scale(1.2)', opacity: 0.8, offset: 0.8 }, // offset — это аналог 80% в CSS
      { transform: 'scale(1)', opacity: 1 }
    ], 
    // 2. Настройки тайминга
    {
      duration: 500,        // Длительность в мс
      easing: 'ease-out',   // Функция плавности
      fill: 'forwards'      // Сохранить состояние после окончания
    }
  );
});

Почему это круче, чем просто вешать CSS-классы?
Потому что метод .animate() возвращает объект анимации, которым можно полностью управлять из JS кода:

const myAnimation = box.animate([...], {...});

myAnimation.pause();   // Поставить на паузу
myAnimation.play();    // Запустить снова
myAnimation.reverse(); // Проиграть в обратную сторону
myAnimation.playbackRate = 2; // Ускорить анимацию в 2 раза

// И даже отловить окончание через Промисы!
myAnimation.finished.then(() => {
  console.log('Анимация успешно завершилась, можно удалить элемент из DOM!');
});

#полезнастатья

Макет для тренировки (romsem)

Перейти к макету 🧑‍💻

#практика | #макет

Как сделать выпадающее меню?

Читать 👨‍💻

#какэтосделать

Задача на JavaScript:

Представим, что у нас есть массив чисел от 1 до 1000. Наша задача состоит в том, чтобы определить, сколько чисел из этого массива являются палиндромами (то есть числами, которые одинаково читаются слева направо и справа налево).

Чтобы решить эту задачу, мы можем использовать следующий алгоритм:
Создаем переменную count и устанавливаем ее значение равным 0. Эта переменная будет использоваться для подсчета количества палиндромов в массиве.
Итерируемся по каждому числу в массиве.
Преобразуем каждое число в строку с помощью метода toString().
Проверяем, является ли полученная строка палиндромом. Для этого мы сравниваем строку с ее обратной версией, которую мы получаем, используя метод split('').reverse().join(''). Если строки равны, значит число является палиндромом.
Если число является палиндромом, увеличиваем значение переменной count на 1.
По окончании итерации, выводим значение переменной count, которое указывает на количество палиндромов в массиве.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Свойство accent-color
2. Секретные фишки Google Chrome DevTools
3. Как сделать выпадающее меню?

Лучшие фронтенд вакансии @job_webdev:
1. angular developer
2. Senior HTML-верстальщик
3. vue.js разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Product-дизайнер (UX/UI)
3. Продуктовый дизайнер

#лучшеезанеделю

CSS inset

Читать 👨‍💻

#полезности

CSS battle - игра-соревнование. Необходимо повторить какой-либо шаблон

Перейти на сайт 👨‍💻

#полезности

Задача на js: Перестановки

Напишите функцию, которая принимает строку и возвращает все возможные перестановки символов этой строки.
Пример:

permute("abc");
// Ожидаемый результат: ["abc", "acb", "bac", "bca", "cab", "cba"]

Условия:
Время работы: O(n!)
Использовать рекурсию для решения задачи.

#домашка

Макет для тренировки (doneart)

Перейти к макету 🧑‍💻

#практика | #макет

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Архитектура в верстке сайтов
2. CSS inset
3. Задача на js: Перестановки

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. ux/ui дизайнер

#лучшеезанеделю

Выравнивание по центру в CSS

Читать 👨‍💻

#css | #полезности

ТОП-13 книг по JavaScript

Читать 👨‍💻

#полезности

Бесконечность в css

Читать 👨‍💻

#css | #полезности

Что такое toast уведомления + плагины

Читать 👨‍💻

#полезности

Полезные js консольные команды

Читать 👨‍💻

#js | #полезности

Макет для тренировки (lego)

Перейти к макету 🧑‍💻

#практика | #макет